fix(forms): improve types of directive constructor arguments (#38944)

Prior to this change, the `validators` and `asyncValidators` fields of a few Forms directives
were typed as `any[]`. This commit updates the types and makes them consistent for all directives
in the Forms package.

BREAKING CHANGE:

Directives in the `@angular/forms` package used to have `any[]` as a type of `validators` and
`asyncValidators` arguments in constructors. Now these arguments are properly typed, so if your
code relies on directive constructor types it may require some updates to improve type safety.

PR Close #38944

goldens/public-api/forms/forms.d.ts

@@ -199,7 +199,7 @@ export declare class FormArrayName extends ControlContainer implements OnInit, O
     name: string | number | null;
     get path(): string[];
     get validator(): ValidatorFn | null;
-    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
+    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
     ngOnDestroy(): void;
     ngOnInit(): void;
 }
@@ -246,7 +246,7 @@ export declare class FormControlDirective extends NgControl implements OnChanges
     /** @deprecated */ update: EventEmitter<any>;
     get validator(): ValidatorFn | null;
     viewModel: any;
-    constructor(validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
+    constructor(validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
     ngOnChanges(changes: SimpleChanges): void;
     viewToModelUpdate(newValue: any): void;
 }
@@ -261,7 +261,7 @@ export declare class FormControlName extends NgControl implements OnChanges, OnD
     get path(): string[];
     /** @deprecated */ update: EventEmitter<any>;
     get validator(): ValidatorFn | null;
-    constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
+    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     viewToModelUpdate(newValue: any): void;
@@ -306,7 +306,7 @@ export declare class FormGroupDirective extends ControlContainer implements Form
     ngSubmit: EventEmitter<any>;
     get path(): string[];
     readonly submitted: boolean;
-    constructor(_validators: any[], _asyncValidators: any[]);
+    constructor(_validators: (Validator | ValidatorFn)[], _asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
     addControl(dir: FormControlName): FormControl;
     addFormArray(dir: FormArrayName): void;
     addFormGroup(dir: FormGroupName): void;
@@ -325,7 +325,7 @@ export declare class FormGroupDirective extends ControlContainer implements Form
 
 export declare class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
     name: string | number | null;
-    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
+    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
 }
 
 export declare class FormsModule {
@@ -380,7 +380,7 @@ export declare class NgForm extends ControlContainer implements Form, AfterViewI
     };
     get path(): string[];
     readonly submitted: boolean;
-    constructor(validators: any[], asyncValidators: any[]);
+    constructor(validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
     addControl(dir: NgModel): void;
     addFormGroup(dir: NgModelGroup): void;
     getControl(dir: NgModel): FormControl;
@@ -413,7 +413,7 @@ export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
     update: EventEmitter<any>;
     get validator(): ValidatorFn | null;
     viewModel: any;
-    constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
+    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[]);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     viewToModelUpdate(newValue: any): void;
@@ -422,7 +422,7 @@ export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
 
 export declare class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {
     name: string;
-    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
+    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
 }
 
 export declare class NgSelectOption implements OnDestroy {

packages/forms/src/directives/abstract_form_group_directive.ts

@@ -13,7 +13,7 @@ import {FormGroup} from '../model';
 import {ControlContainer} from './control_container';
 import {Form} from './form_interface';
 import {composeAsyncValidators, composeValidators, controlPath} from './shared';
-import {AsyncValidatorFn, ValidatorFn} from './validators';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
 
 
 
@@ -41,7 +41,7 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
    * @internal
    */
   // TODO(issue/24571): remove '!'.
-  _validators!: any[];
+  _validators!: (Validator|ValidatorFn)[];
 
   /**
    * @description
@@ -50,7 +50,7 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
    * @internal
    */
   // TODO(issue/24571): remove '!'.
-  _asyncValidators!: any[];
+  _asyncValidators!: (AsyncValidator|AsyncValidatorFn)[];
 
   /** @nodoc */
   ngOnInit(): void {

packages/forms/src/directives/ng_form.ts

@@ -17,6 +17,7 @@ import {NgControl} from './ng_control';
 import {NgModel} from './ng_model';
 import {NgModelGroup} from './ng_model_group';
 import {composeAsyncValidators, composeValidators, removeDir, setUpControl, setUpFormContainer, syncPendingControls} from './shared';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
 
 export const formDirectiveProvider: any = {
   provide: ControlContainer,
@@ -130,8 +131,9 @@ export class NgForm extends ControlContainer implements Form, AfterViewInit {
   @Input('ngFormOptions') options!: {updateOn?: FormHooks};
 
   constructor(
-      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
-      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
     super();
     this.form =
         new FormGroup({}, composeValidators(validators), composeAsyncValidators(asyncValidators));

packages/forms/src/directives/ng_model.ts

@@ -202,9 +202,9 @@ export class NgModel extends NgControl implements OnChanges, OnDestroy {
 
   constructor(
       @Optional() @Host() parent: ControlContainer,
-      @Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
       @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
-          Array<AsyncValidator|AsyncValidatorFn>,
+          (AsyncValidator|AsyncValidatorFn)[],
       @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {
     super();
     this._parent = parent;

packages/forms/src/directives/ng_model_group.ts

@@ -14,6 +14,7 @@ import {AbstractFormGroupDirective} from './abstract_form_group_directive';
 import {ControlContainer} from './control_container';
 import {NgForm} from './ng_form';
 import {TemplateDrivenErrors} from './template_driven_errors';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
 
 export const modelGroupProvider: any = {
   provide: ControlContainer,
@@ -58,8 +59,9 @@ export class NgModelGroup extends AbstractFormGroupDirective implements OnInit,
 
   constructor(
       @Host() @SkipSelf() parent: ControlContainer,
-      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
-      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
     super();
     this._parent = parent;
     this._validators = validators;

packages/forms/src/directives/reactive_directives/form_control_directive.ts

@@ -104,9 +104,9 @@ export class FormControlDirective extends NgControl implements OnChanges {
   _ngModelWarningSent = false;
 
   constructor(
-      @Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
       @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
-          Array<AsyncValidator|AsyncValidatorFn>,
+          (AsyncValidator|AsyncValidatorFn)[],
       @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
       @Optional() @Inject(NG_MODEL_WITH_FORM_CONTROL_WARNING) private _ngModelWarningConfig: string|
       null) {

packages/forms/src/directives/reactive_directives/form_control_name.ts

@@ -128,9 +128,9 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
 
   constructor(
       @Optional() @Host() @SkipSelf() parent: ControlContainer,
-      @Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
       @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
-          Array<AsyncValidator|AsyncValidatorFn>,
+          (AsyncValidator|AsyncValidatorFn)[],
       @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
       @Optional() @Inject(NG_MODEL_WITH_FORM_CONTROL_WARNING) private _ngModelWarningConfig: string|
       null) {

packages/forms/src/directives/reactive_directives/form_group_directive.ts

@@ -14,6 +14,7 @@ import {ControlContainer} from '../control_container';
 import {Form} from '../form_interface';
 import {ReactiveErrors} from '../reactive_errors';
 import {cleanUpControl, composeAsyncValidators, composeValidators, removeDir, setUpControl, setUpFormContainer, syncPendingControls} from '../shared';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from '../validators';
 
 import {FormControlName} from './form_control_name';
 import {FormArrayName, FormGroupName} from './form_group_name';
@@ -81,8 +82,9 @@ export class FormGroupDirective extends ControlContainer implements Form, OnChan
   @Output() ngSubmit = new EventEmitter();
 
   constructor(
-      @Optional() @Self() @Inject(NG_VALIDATORS) private _validators: any[],
+      @Optional() @Self() @Inject(NG_VALIDATORS) private _validators: (Validator|ValidatorFn)[],
-      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) private _asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) private _asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
     super();
   }
 

packages/forms/src/directives/reactive_directives/form_group_name.ts

@@ -14,7 +14,7 @@ import {AbstractFormGroupDirective} from '../abstract_form_group_directive';
 import {ControlContainer} from '../control_container';
 import {ReactiveErrors} from '../reactive_errors';
 import {composeAsyncValidators, composeValidators, controlPath} from '../shared';
-import {AsyncValidatorFn, ValidatorFn} from '../validators';
+import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from '../validators';
 
 import {FormGroupDirective} from './form_group_directive';
 
@@ -86,8 +86,9 @@ export class FormGroupName extends AbstractFormGroupDirective implements OnInit,
 
   constructor(
       @Optional() @Host() @SkipSelf() parent: ControlContainer,
-      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
-      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
     super();
     this._parent = parent;
     this._validators = validators;
@@ -137,10 +138,10 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
   _parent: ControlContainer;
 
   /** @internal */
-  _validators: any[];
+  _validators: (Validator|ValidatorFn)[];
 
   /** @internal */
-  _asyncValidators: any[];
+  _asyncValidators: (AsyncValidator|AsyncValidatorFn)[];
 
   /**
    * @description
@@ -156,8 +157,9 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
 
   constructor(
       @Optional() @Host() @SkipSelf() parent: ControlContainer,
-      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
-      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
     super();
     this._parent = parent;
     this._validators = validators;

packages/forms/test/directives_spec.ts

@@ -231,8 +231,9 @@ class CustomValidatorDirective implements Validator {
       });
 
       describe('addFormGroup', () => {
-        const matchingPasswordsValidator = (g: FormGroup) => {
+        const matchingPasswordsValidator = (g: AbstractControl) => {
-          if (g.controls['password'].value != g.controls['passwordConfirm'].value) {
+          const controls = (g as FormGroup).controls;
+          if (controls['password'].value != controls['passwordConfirm'].value) {
             return {'differentPasswords': true};
           } else {
             return null;