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
2020-09-22 18:00:37 -07:00 · 2020-09-22 18:00:37 -07:00 · 246de9aaad
commit 246de9aaad
parent 07a66fc4c2
10 changed files with 41 additions and 32 deletions
--- a/goldens/public-api/forms/forms.d.ts
+++ b/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 {
--- a/packages/forms/src/directives/abstract_form_group_directive.ts
+++ b/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 {
--- a/packages/forms/src/directives/ng_form.ts
+++ b/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_ASYNC_VALIDATORS) asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
    super();
    this.form =
        new FormGroup({}, composeValidators(validators), composeAsyncValidators(asyncValidators));
--- a/packages/forms/src/directives/ng_model.ts
+++ b/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;
--- a/packages/forms/src/directives/ng_model_group.ts
+++ b/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_ASYNC_VALIDATORS) asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
    super();
    this._parent = parent;
    this._validators = validators;
--- a/packages/forms/src/directives/reactive_directives/form_control_directive.ts
+++ b/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) {
--- a/packages/forms/src/directives/reactive_directives/form_control_name.ts
+++ b/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) {
--- a/packages/forms/src/directives/reactive_directives/form_group_directive.ts
+++ b/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_ASYNC_VALIDATORS) private _asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_VALIDATORS) private _validators: (Validator|ValidatorFn)[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) private _asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
    super();
  }

--- a/packages/forms/src/directives/reactive_directives/form_group_name.ts
+++ b/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_ASYNC_VALIDATORS) asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
+      @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_ASYNC_VALIDATORS) asyncValidators: any[]) {
+      @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
+      @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
+          (AsyncValidator|AsyncValidatorFn)[]) {
    super();
    this._parent = parent;
    this._validators = validators;
--- a/packages/forms/test/directives_spec.ts
+++ b/packages/forms/test/directives_spec.ts
@ -231,8 +231,9 @@ class CustomValidatorDirective implements Validator {
      });

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