fix(forms): accept number length in length validators (#32057)

Both `MinLengthValidator` and `MaxLengthValidator` accepted only string inputs for the length required, which throws with Ivy and `fullTemplateTypeCheck` enabled:

    <!-- min = 2 in the component -->
    <input [minlength]="min">

with:

    Type 'number' is not assignable to type 'string | undefined'

This relaxes the accepted type to `string | number` to avoid breakage when developers switch to Ivy and fTTC.

PR Close #32057
This commit is contained in:
cexbrayat 2019-08-08 19:19:41 +02:00 committed by atscott
parent d863526ca9
commit 9ceee07d83
2 changed files with 9 additions and 7 deletions

View File

@ -333,7 +333,7 @@ export const MIN_LENGTH_VALIDATOR: any = {
/** /**
* A directive that adds minimum length validation to controls marked with the * A directive that adds minimum length validation to controls marked with the
* `minlength` attribute. The directive is provided with the `NG_VALIDATORS` mult-provider list. * `minlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
* *
* @see [Form Validation](guide/form-validation) * @see [Form Validation](guide/form-validation)
* *
@ -369,7 +369,7 @@ export class MinLengthValidator implements Validator,
* Tracks changes to the the minimum length bound to this directive. * Tracks changes to the the minimum length bound to this directive.
*/ */
// TODO(issue/24571): remove '!'. // TODO(issue/24571): remove '!'.
@Input() minlength !: string; @Input() minlength !: string | number;
/** /**
* @description * @description
@ -403,7 +403,8 @@ export class MinLengthValidator implements Validator,
registerOnValidatorChange(fn: () => void): void { this._onChange = fn; } registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
private _createValidator(): void { private _createValidator(): void {
this._validator = Validators.minLength(parseInt(this.minlength, 10)); this._validator = Validators.minLength(
typeof this.minlength === 'number' ? this.minlength : parseInt(this.minlength, 10));
} }
} }
@ -455,7 +456,7 @@ export class MaxLengthValidator implements Validator,
* Tracks changes to the the maximum length bound to this directive. * Tracks changes to the the maximum length bound to this directive.
*/ */
// TODO(issue/24571): remove '!'. // TODO(issue/24571): remove '!'.
@Input() maxlength !: string; @Input() maxlength !: string | number;
/** /**
* @description * @description
@ -489,7 +490,8 @@ export class MaxLengthValidator implements Validator,
registerOnValidatorChange(fn: () => void): void { this._onChange = fn; } registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
private _createValidator(): void { private _createValidator(): void {
this._validator = Validators.maxLength(parseInt(this.maxlength, 10)); this._validator = Validators.maxLength(
typeof this.maxlength === 'number' ? this.maxlength : parseInt(this.maxlength, 10));
} }
} }

View File

@ -330,14 +330,14 @@ export declare class FormsModule {
} }
export declare class MaxLengthValidator implements Validator, OnChanges { export declare class MaxLengthValidator implements Validator, OnChanges {
maxlength: string; maxlength: string | number;
ngOnChanges(changes: SimpleChanges): void; ngOnChanges(changes: SimpleChanges): void;
registerOnValidatorChange(fn: () => void): void; registerOnValidatorChange(fn: () => void): void;
validate(control: AbstractControl): ValidationErrors | null; validate(control: AbstractControl): ValidationErrors | null;
} }
export declare class MinLengthValidator implements Validator, OnChanges { export declare class MinLengthValidator implements Validator, OnChanges {
minlength: string; minlength: string | number;
ngOnChanges(changes: SimpleChanges): void; ngOnChanges(changes: SimpleChanges): void;
registerOnValidatorChange(fn: () => void): void; registerOnValidatorChange(fn: () => void): void;
validate(control: AbstractControl): ValidationErrors | null; validate(control: AbstractControl): ValidationErrors | null;