fix(lib): formGroupErrors properties are not correctly typed

They are `ValidationErrors | ValidationErrors[]` whereas the correct type should be infered correctly for each
cloudnc · Jun 28, 2019 · 62d0eb4 · 62d0eb4
1 parent 4fa7ddf
commit 62d0eb4
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/projects/ngx-sub-form/src/lib/ngx-sub-form-utils.ts b/projects/ngx-sub-form/src/lib/ngx-sub-form-utils.ts
@@ -20,11 +20,14 @@ export type ControlsNames<T> = { [K in keyof T]-?: K };
 export type ControlMap<T, V> = { [K in keyof T]-?: V };
 
 export type ControlsType<T> = { [K in keyof T]-?: T[K] extends any[] ? FormArray : AbstractControl };
+export type FormErrorsType<T> = { [K in keyof T]-?: T[K] extends any[] ? ValidationErrors[] : ValidationErrors };
 
 export type FormUpdate<FormInterface> = { [FormControlInterface in keyof FormInterface]?: true };
 
 export type FormErrors<FormInterface> = null | Partial<
-  ControlMap<FormInterface, ValidationErrors | ValidationErrors[] | null> & { formGroup?: ValidationErrors }
+  FormErrorsType<FormInterface> & {
+    formGroup?: ValidationErrors;
+  }
 >;
 
 export type KeysWithType<T, V> = { [K in keyof T]: T[K] extends V ? K : never }[keyof T];

diff --git a/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts b/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts
@@ -21,7 +21,6 @@ import {
   isNullOrUndefined,
   ControlsType,
   ArrayPropertyKey,
-  ArrayPropertyValue,
 } from './ngx-sub-form-utils';
 import { FormGroupOptions, NgxFormWithArrayControls, OnFormUpdate, TypedFormGroup } from './ngx-sub-form.types';
 
@@ -47,9 +46,10 @@ export abstract class NgxSubFormComponent<ControlInterface, FormInterface = Cont
   }
 
   public get formGroupErrors(): FormErrors<FormInterface> {
-    const errors: Partial<ControlMap<FormInterface, ValidationErrors | null>> | null = this.mapControls<
-      ValidationErrors | ValidationErrors[] | null
-    >(ctrl => ctrl.errors, ctrl => ctrl.invalid);
+    const errors: FormErrors<FormInterface> = this.mapControls<ValidationErrors | ValidationErrors[] | null>(
+      ctrl => ctrl.errors,
+      ctrl => ctrl.invalid,
+    ) as FormErrors<FormInterface>;
 
     if (!this.formGroup.errors && (!errors || !Object.keys(errors).length)) {
       return null;

diff --git a/src/app/main/listing/listing-form/listing-form.component.html b/src/app/main/listing/listing-form/listing-form.component.html
@@ -28,6 +28,12 @@
         />
       </mat-form-field>
 
+      <!-- this is useful to make sure the type of the error is correct -->
+      <!-- as it could be either an object or an array and AoT would notice if not correctly typed -->
+      <mat-error data-input-id-error *ngIf="formGroupErrors?.id?.required">
+        ID is required
+      </mat-error>
+
       <mat-form-field>
         <input
           matInput
@@ -39,6 +45,10 @@
         />
       </mat-form-field>
 
+      <mat-error data-input-title-error *ngIf="formGroupErrors?.title?.required">
+        Title is required
+      </mat-error>
+
       <mat-form-field>
         <input
           matInput
@@ -50,6 +60,10 @@
         />
       </mat-form-field>
 
+      <mat-error data-input-image-url-error *ngIf="formGroupErrors?.imageUrl?.required">
+        Image url is required
+      </mat-error>
+
       <mat-form-field>
         <input
           matInput
@@ -61,6 +75,10 @@
         />
       </mat-form-field>
 
+      <mat-error data-input-price-error *ngIf="formGroupErrors?.price?.required">
+        Price is required
+      </mat-error>
+
       <mat-form-field>
         <mat-select
           data-select-listing-type