feat(forms): Improve typings form (async)Validators (#48679)

JeanMeche · dylhunn · commit 07a1aa300404 · 2023-03-30T11:47:29.000-07:00
With this commit, AsyncValidatorFn cannot be passed as ValidatorFn anymore in FormControl. fixes: #48676 PR Close #48679
diff --git a/goldens/public-api/forms/index.md b/goldens/public-api/forms/index.md
@@ -905,7 +905,10 @@ export interface Validator {
 // @public
 export interface ValidatorFn {
     // (undocumented)
-    (control: AbstractControl): ValidationErrors | null;
+    (control: AbstractControl): (ValidationErrors & {
+        then?: never;
+        subscribe?: never;
+    }) | null;
 }
 
 // @public
diff --git a/packages/forms/src/directives/validators.ts b/packages/forms/src/directives/validators.ts
@@ -482,10 +482,13 @@ export class EmailValidator extends AbstractValidatorDirective {
  * A function that receives a control and synchronously returns a map of
  * validation errors if present, otherwise null.
  *
+ * Error objects with a `then` key or a `subscribe` key are not valid.
+ * They describe an async validator returning respectively a Promise or an Observable.
+ *
  * @publicApi
  */
 export interface ValidatorFn {
-  (control: AbstractControl): ValidationErrors|null;
+  (control: AbstractControl): (ValidationErrors&{then?: never, subscribe?: never})|null;
 }
 
 /**
diff --git a/packages/forms/src/form_builder.ts b/packages/forms/src/form_builder.ts
@@ -8,7 +8,7 @@
 
 import {inject, Injectable} from '@angular/core';
 
-import {AsyncValidatorFn, ValidatorFn} from './directives/validators';
+import {AsyncValidatorFn, ValidationErrors, ValidatorFn} from './directives/validators';
 import {AbstractControl, AbstractControlOptions, FormHooks} from './model/abstract_model';
 import {FormArray, UntypedFormArray} from './model/form_array';
 import {FormControl, FormControlOptions, FormControlState, UntypedFormControl} from './model/form_control';
@@ -22,10 +22,17 @@ function isAbstractControlOptions(options: AbstractControlOptions|{[key: string]
        (options as AbstractControlOptions).updateOn !== undefined);
 }
 
+// Sometimes we might need this base signature for ValidatorFn because of compiler limitations
+// see https://github.com/microsoft/TypeScript/issues/32608
+export interface UnsafeValidatorFn {
+  (control: AbstractControl): ValidationErrors|null;
+}
+
 /**
  * The union of all validator types that can be accepted by a ControlConfig.
  */
-type ValidatorConfig = ValidatorFn|AsyncValidatorFn|ValidatorFn[]|AsyncValidatorFn[];
+
+type ValidatorConfig = UnsafeValidatorFn|AsyncValidatorFn|UnsafeValidatorFn[]|AsyncValidatorFn[];
 
 /**
  * The compiler may not always be able to prove that the elements of the control config are a tuple
diff --git a/packages/forms/test/form_control_spec.ts b/packages/forms/test/form_control_spec.ts
@@ -398,6 +398,15 @@ describe('FormControl', () => {
          expect(c.hasValidator(minValidator)).toEqual(true);
          expect(c.hasValidator(Validators.min(5))).toEqual(false);
        });
+
+    it('should error if passed an async validator instead of a validator', fakeAsync(() => {
+         // @ts-expect-error
+         const c = new FormControl('value', asyncValidator('expected'));
+         tick();
+
+         expect(c.valid).toEqual(false);
+         expect(c.errors).not.toEqual({'async': true});
+       }));
   });
 
   describe('asyncValidator', () => {
@@ -590,16 +599,16 @@ describe('FormControl', () => {
        }));
 
     it('should clear async validators', fakeAsync(() => {
-         const c = new FormControl('value', [asyncValidator('expected'), otherAsyncValidator]);
+         const c = new FormControl('value', [], [asyncValidator('expected'), otherAsyncValidator]);
 
-         c.clearValidators();
+         c.clearAsyncValidators();
 
          expect(c.asyncValidator).toEqual(null);
        }));
 
     it('should not change validity state if control is disabled while async validating',
        fakeAsync(() => {
-         const c = new FormControl('value', [asyncValidator('expected')]);
+         const c = new FormControl('value', [], [asyncValidator('expected')]);
          c.disable();
          tick();
          expect(c.status).toEqual('DISABLED');
diff --git a/packages/forms/test/form_group_spec.ts b/packages/forms/test/form_group_spec.ts
@@ -816,7 +816,7 @@ describe('FormGroup', () => {
     let group: FormGroup;
 
     beforeEach(waitForAsync(() => {
-      control = new FormControl('', null, asyncValidatorReturningObservable);
+      control = new FormControl('', [], asyncValidatorReturningObservable);
       group = new FormGroup({'one': control});
     }));
 

Original file line number	Diff line number	Diff line change
`@@ -482,10 +482,13 @@ export class EmailValidator extends AbstractValidatorDirective {`
`482`	`482`	`* A function that receives a control and synchronously returns a map of`
`483`	`483`	`* validation errors if present, otherwise null.`
`484`	`484`	`*`
	`485`	+ * Error objects with a `then` key or a `subscribe` key are not valid.
	`486`	`+ * They describe an async validator returning respectively a Promise or an Observable.`
	`487`	`+ *`
`485`	`488`	`* @publicApi`
`486`	`489`	`*/`
`487`	`490`	`export interface ValidatorFn {`
`488`		`- (control: AbstractControl): ValidationErrors\|null;`
	`491`	`+ (control: AbstractControl): (ValidationErrors&{then?: never, subscribe?: never})\|null;`
`489`	`492`	`}`
`490`	`493`
`491`	`494`	`/**`