feat: only emit values is status valid

Author: Joe Gilreath

libs/reactive-forms/src/lib/core.ts

@@ -1,6 +1,6 @@
 import { AbstractControl, ValidationErrors } from '@angular/forms';
 import { defer, merge, Observable, of, Subscription } from 'rxjs';
-import { distinctUntilChanged, map } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map } from 'rxjs/operators';
 
 export function selectControlValue$<T, R>(
   control: any,
@@ -21,6 +21,15 @@ export function controlValueChanges$<T>(
   ) as Observable<T>;
 }
 
+export function controlValidValueChanges$<T>(
+  control: AbstractControl & { getRawValue: () => T }
+): Observable<T> {
+  return merge(
+    defer(() => of(control.getRawValue())),
+    control.valueChanges.pipe(filter(() => control.valid), map(() => control.getRawValue()))
+  ) as Observable<T>;
+}
+
 export type ControlState = 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';
 
 export function controlStatus$<

libs/reactive-forms/src/lib/form-array.spec.ts

@@ -1,7 +1,7 @@
 import { Validators } from '@angular/forms';
 import { expectTypeOf } from 'expect-type';
 import { Observable, of, Subject, Subscription } from 'rxjs';
-import {ControlsOf, FormControl, FormGroup, ValuesOf} from '..';
+import {ControlsOf, FormControl, FormGroup} from '..';
 import { ControlState } from './core';
 import { FormArray } from './form-array';
 
@@ -224,6 +224,13 @@ const createArray = (withError = false) => {
   );
 };
 
+const createInvalidArray = (withError = false) => {
+  return new FormArray<string | null>(
+    [new FormControl(null, Validators.required), new FormControl(null, Validators.required)],
+    withError ? errorFn : []
+  );
+};
+
 describe('FormArray Functionality', () => {
   it('should valueChanges$', () => {
     const control = createArray();
@@ -240,6 +247,25 @@ describe('FormArray Functionality', () => {
     expect(spy).toHaveBeenCalledWith(['1', '3', '']);
   });
 
+  it('should validValueChanges$', () => {
+    const control = createInvalidArray();
+    const spy = jest.fn();
+    control.validValue$.subscribe(spy);
+    expect(spy).toHaveBeenCalledTimes(1);
+    control.patchValue(['1', '2']);
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(spy).toHaveBeenCalledWith(['1', '2']);
+    control.push(new FormControl('3', Validators.required));
+    expect(spy).toHaveBeenCalledTimes(3);
+    expect(spy).toHaveBeenCalledWith(['1', '2', '3']);
+    control.push(new FormControl(null, Validators.required));
+    expect(spy).toHaveBeenCalledTimes(3);
+    expect(spy).not.toHaveReturnedWith(['1', '2', '3', null]);
+    control.removeAt(3);
+    expect(spy).toHaveBeenCalledTimes(4);
+    expect(spy).toHaveBeenCalledWith(['1', '2', '3']);
+  });
+
   it('should disabledChanges$', () => {
     const control = createArray();
     const spy = jest.fn();

libs/reactive-forms/src/lib/form-array.ts

@@ -18,6 +18,7 @@ import {
   disableControl,
   enableControl,
   markAllDirty,
+  controlValidValueChanges$,
 } from './core';
 import { DeepPartial } from './types';
 
@@ -46,6 +47,7 @@ export class FormArray<
     .asObservable()
     .pipe(distinctUntilChanged());
   readonly value$ = controlValueChanges$<Array<ValueOfControl<Control>>>(this);
+  readonly validValue$ = controlValidValueChanges$<Array<ValueOfControl<Control>>>(this);
   readonly disabled$ = controlStatus$(this, 'disabled');
   readonly enabled$ = controlStatus$(this, 'enabled');
   readonly invalid$ = controlStatus$(this, 'invalid');

libs/reactive-forms/src/lib/form-control.spec.ts

@@ -14,6 +14,19 @@ describe('FormControl Functionality', () => {
     expect(spy).toHaveBeenCalledWith('patched');
   });
 
+  it('should validValueChanges$', () => {
+    const control = new FormControl<string | null>(null, Validators.required);
+    const spy = jest.fn();
+    control.validValue$.subscribe(spy);
+    expect(spy).toHaveBeenCalledTimes(1);
+    control.patchValue('patched');
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(spy).toHaveBeenCalledWith('patched');
+    control.patchValue('');
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(spy).not.toHaveBeenCalledWith('');
+  });
+
   it('should disabledChanges$', () => {
     const control = new FormControl<string>();
     const spy = jest.fn();

libs/reactive-forms/src/lib/form-control.ts

@@ -16,6 +16,7 @@ import {
   removeError,
   hasErrorAnd,
   controlErrorChanges$,
+  controlValidValueChanges$,
 } from './core';
 import { BoxedValue } from './types';
 
@@ -34,6 +35,7 @@ export class FormControl<T> extends UntypedFormControl {
     .asObservable()
     .pipe(distinctUntilChanged());
   readonly value$ = controlValueChanges$<T>(this);
+  readonly validValue$ = controlValidValueChanges$<T>(this);
   readonly disabled$ = controlStatus$(this, 'disabled');
   readonly enabled$ = controlStatus$(this, 'enabled');
   readonly invalid$ = controlStatus$(this, 'invalid');

libs/reactive-forms/src/lib/form-group.spec.ts

@@ -25,6 +25,18 @@ const createGroup = () => {
   );
 };
 
+const createInvalidGroup = () => {
+  return new FormGroup(
+    {
+      name: new FormControl<string | null>(null, Validators.required),
+      phone: new FormGroup({
+        num: new FormControl<number | null>(null, Validators.required),
+        prefix: new FormControl<number | null>(null, Validators.required),
+      }),
+    }
+  );
+};
+
 describe('FormGroup Functionality', () => {
   it('should valueChanges$', () => {
     const control = createGroup();
@@ -46,6 +58,49 @@ describe('FormGroup Functionality', () => {
     });
   });
 
+  it('should validValueChanges$', () => {
+    const control = createInvalidGroup();
+    const spy = jest.fn();
+    control.validValue$.subscribe(spy);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    control.patchValue({
+      name: 'jim',
+      phone: {
+        num: 0,
+        prefix: 1
+      }
+    });
+    
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(spy).toHaveBeenCalledWith({
+      name: 'jim',
+      phone: { num: 0, prefix: 1 },
+    });
+    
+    control.patchValue({
+      name: 'changed',
+    });
+    
+    expect(spy).toHaveBeenCalledTimes(3);
+    expect(spy).toHaveBeenCalledWith({
+      name: 'changed',
+      phone: { num: 0, prefix: 1 },
+    });
+
+    control.patchValue({
+      phone: {
+        num: null
+      }
+    });
+
+    expect(spy).toHaveBeenCalledTimes(3);
+    expect(spy).not.toHaveBeenCalledWith({
+      name: 'changed',
+      phone: { num: null, prefix: 1 },
+    });
+  });
+
   it('should disabledChanges$', () => {
     const control = createGroup();
     const spy = jest.fn();

libs/reactive-forms/src/lib/form-group.ts

@@ -10,6 +10,7 @@ import {
   controlEnabledWhile,
   controlErrorChanges$,
   controlStatus$,
+  controlValidValueChanges$,
   controlValueChanges$,
   disableControl,
   enableControl,
@@ -36,6 +37,7 @@ export class FormGroup<T extends Record<string, any>> extends UntypedFormGroup {
     .asObservable()
     .pipe(distinctUntilChanged());
   readonly value$ = controlValueChanges$<ValuesOf<T>>(this);
+  readonly validValue$ = controlValidValueChanges$<ValuesOf<T>>(this);
   readonly disabled$ = controlStatus$(this, 'disabled');
   readonly enabled$ = controlStatus$(this, 'enabled');
   readonly invalid$ = controlStatus$(this, 'invalid');