cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Andrew Kushnir
2020-09-22 18:00:37 -07:00
committed by Joey Perrott
parent 07a66fc4c2
commit 246de9aaad
10 changed files with 41 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/forms/src/directives/abstract_form_group_directive.ts
View File

@ -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 {

6
packages/forms/src/directives/ng_form.ts
View File

@ -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));

4
packages/forms/src/directives/ng_model.ts
View File

@ -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;

6
packages/forms/src/directives/ng_model_group.ts
View File

@ -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;

4
packages/forms/src/directives/reactive_directives/form_control_directive.ts
View File

@ -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) {

4
packages/forms/src/directives/reactive_directives/form_control_name.ts
View File

@ -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) {

6
packages/forms/src/directives/reactive_directives/form_group_directive.ts
View File

@ -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();
}

16
packages/forms/src/directives/reactive_directives/form_group_name.ts
View File

@ -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;

5
packages/forms/test/directives_spec.ts
View File

@ -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;