fix(lib): save only possible if form is valid (#114)

fix(lib): save only possible if form is valid
cloudnc · Nov 12, 2019 · 9a7da28 · 9a7da28
2 parents 1956d25 + a169bca
commit 9a7da28
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/projects/ngx-sub-form/src/lib/ngx-root-form.component.spec.ts b/projects/ngx-sub-form/src/lib/ngx-root-form.component.spec.ts
@@ -20,13 +20,13 @@ const MAX_CREW_MEMBER_COUNT = 15;
 const getDefaultValues = (): Required<Vehicle> => ({
   color: '#ffffff',
   canFire: true,
-  crewMemberCount: 10,
+  crewMemberCount: MIN_CREW_MEMBER_COUNT + 1,
 });
 
 const getNewValues = (): Required<Vehicle> => ({
   color: '#000000',
   canFire: false,
-  crewMemberCount: 100,
+  crewMemberCount: MAX_CREW_MEMBER_COUNT - 1,
 });
 
 @Component({
@@ -146,6 +146,19 @@ describe(`NgxRootFormComponent`, () => {
     componentFixture.detectChanges();
     expect(componentForm.formGroup.disabled).toBe(true);
   });
+
+  it(`should not emit the form value when calling manualSave if the form is not valid`, () => {
+    component.vehicle$.next({
+      ...getDefaultValues(),
+      // following property is required
+      canFire: null,
+    });
+    componentFixture.detectChanges();
+
+    const vehicleUpdatedSpy = spyOn(component, 'vehicleUpdated');
+    componentForm.manualSave();
+    expect(vehicleUpdatedSpy).not.toHaveBeenCalled();
+  });
 });
 
 @Component({

diff --git a/projects/ngx-sub-form/src/lib/ngx-root-form.component.ts b/projects/ngx-sub-form/src/lib/ngx-root-form.component.ts
@@ -53,6 +53,7 @@ export abstract class NgxRootFormComponent<ControlInterface, FormInterface = Con
 
     this._dataOutput$
       .pipe(
+        filter(() => this.formGroup.valid),
         tap(value => this.dataOutput.emit(value)),
         takeUntilDestroyed(this),
       )
@@ -89,7 +90,7 @@ export abstract class NgxRootFormComponent<ControlInterface, FormInterface = Con
   }
 
   public manualSave(): void {
-    if (!isNullOrUndefined(this.dataValue)) {
+    if (!isNullOrUndefined(this.dataValue) && this.formGroup.valid) {
       this._dataOutput$.next(this.dataValue);
     }
   }