Merge pull request #206 from zakhenry/feat/optional-on-touched

feat(Touched): Add ability for sub form components to mark sub control as touched with an observable
cloudnc · Mar 17, 2021 · 543357e · 543357e
2 parents b04afc5 + 57178d0
commit 543357e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/projects/ngx-sub-form/src/lib/helpers.ts b/projects/ngx-sub-form/src/lib/helpers.ts
@@ -35,7 +35,7 @@ export const getControlValueAccessorBindings = <ControlInterface>(
 ): FormBindings<ControlInterface> => {
   const writeValue$$: ReplaySubject<Nilable<ControlInterface>> = new ReplaySubject(1);
   const registerOnChange$$: ReplaySubject<(formValue: ControlInterface | null) => void> = new ReplaySubject(1);
-  const registerOnTouched$$: ReplaySubject<(_: any) => void> = new ReplaySubject(1);
+  const registerOnTouched$$: ReplaySubject<() => void> = new ReplaySubject(1);
   const setDisabledState$$: ReplaySubject<boolean> = new ReplaySubject(1);
 
   const controlValueAccessorPatch: Required<ControlValueAccessor> = {

diff --git a/projects/ngx-sub-form/src/lib/ngx-sub-form.ts b/projects/ngx-sub-form/src/lib/ngx-sub-form.ts
@@ -2,7 +2,7 @@ import { ɵmarkDirty as markDirty } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import isEqual from 'fast-deep-equal';
 import { getObservableLifecycle } from 'ngx-observable-lifecycle';
-import { EMPTY, forkJoin, identity, merge, Observable, of, timer } from 'rxjs';
+import { combineLatest, EMPTY, forkJoin, identity, merge, Observable, of, timer } from 'rxjs';
 import {
   delay,
   exhaustMap,
@@ -229,6 +229,10 @@ export function createForm<ControlInterface, FormInterface>(
         formGroup.updateValueAndValidity({ emitEvent: false });
       }),
     ),
+    bindTouched$: combineLatest([componentHooks.registerOnTouched$, options.touched$ ?? EMPTY]).pipe(
+      delay(0),
+      tap(([onTouched]) => onTouched()),
+    ),
   };
 
   forkJoin(sideEffects)

diff --git a/projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts b/projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts
@@ -19,7 +19,7 @@ export interface ComponentHooks {
 export interface FormBindings<ControlInterface> {
   readonly writeValue$: Observable<Nilable<ControlInterface>>;
   readonly registerOnChange$: Observable<(formValue: ControlInterface | null) => void>;
-  readonly registerOnTouched$: Observable<(_: any) => void>;
+  readonly registerOnTouched$: Observable<() => void>;
   readonly setDisabledState$: Observable<boolean>;
 }
 
@@ -75,6 +75,8 @@ export type NgxSubFormOptions<ControlInterface, FormInterface = ControlInterface
   formGroupOptions?: FormGroupOptions<FormInterface>;
   emitNullOnDestroy?: boolean;
   componentHooks?: ComponentHooks;
+  // emit on this observable to mark the control as touched
+  touched$?: Observable<void>;
 } & NgxSubFormRemap<ControlInterface, FormInterface> &
   NgxSubFormArray<FormInterface>;