forms - custom - Validadores de forma angular 4: minLength y maxLength no funcionan en el número de tipo de campo

custom validator angular 6

Question

Estoy intentando desarrollar un formulario de contacto, quiero que el usuario ingrese los valores de los números de teléfono entre la longitud 10-12.

Notablemente, la misma validación está funcionando en el campo Mensaje , su único campo numérico que me está dando problemas.

Encontré esta respuesta pero no me sirve.

Tengo un código como el siguiente:

HTML:

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
<input type="number" formControlName="phone" placeholder="Phone Number">
<input type="text" formControlName="message" placeholder="Message">
<button class="button" type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

TS:

this.myForm = this.formBuilder.group({
phone: ['''', [Validators.required, Validators.minLength(10), Validators.maxLength(12)]],
message: ['''', [Validators.required, Validators.minLength(10), Validators.maxLength(100)]]
});`

Answer 1

La validación de formulario de múltiples parámetros o múltiples condiciones debe estar compuesta como un validador único, de lo contrario obtendrá un error observable o de promesa:

phone: ['''', Validators.compose([Validators.required,Validators.min(10000000000), Validators.max(999999999999)])],

Answer 2

No debe usar la longitud aquí, para el uso de un validador personal mínimo y máximo como este,

var numberControl = new FormControl("", CustomValidators.number({min: 10000000000, max: 999999999999 }))

angular.io/api/forms/Validators

Answer 3

Para un campo number , puede validar los valores mínimo y máximo utilizando la validación angular incorporada, como esto:

.ts

import { FormBuilder, FormGroup, Validators } from ''@angular/forms'';
private myNumberFieldMin: number = 1;
private myNumberFieldMax: number = 1000000;
constructor() {
this.myForm = this.formBuilder.group({
myNumberField
})
this.myForm.controls.myNumberField.setValidators([
Validators.min(this.myNumberFieldMin),
Validators.max(this.myNumberFieldMax)
]);

html

<form [formGroup]="myForm">
<input type="number" formControlName="myNumberField">
<div *ngIf="this.myForm.controls[''myNumberField''].errors && this.myForm.controls[''myNumberField''].errors.min">
<span class="error-message">Value must be at least {{myNumberFieldMin}}</span>
</div>
<div *ngIf="this.myForm.controls[''myNumberField''].errors && this.myForm.controls[''myNumberField''].errors.max">
<span class="error-message">Maximum value is {{myNumberFieldMax}}</span>
</div>
</form>

Answer 4

Pruebe este código de ejemplo de trabajo:

component.html

<div class="container">
<form [formGroup]="myForm"
(ngFormSubmit)="registerUser(myForm.value)" novalidate>
<div class="form-group" [ngClass]="{''has-error'':!myForm.controls[''phone''].valid}">
<label for="phone">Email</label>
<input type="phone" formControlName="phone" placeholder="Enter Phone"
class="form-control">
<p class="alert alert-danger" *ngIf="myForm.controls[''phone''].hasError(''minlength'')">
Your phone must be at least 5 characters long.
</p>
<p class="alert alert-danger" *ngIf="myForm.controls[''phone''].hasError(''maxlength'')">
Your phone cannot exceed 10 characters.
</p>
<p class="alert alert-danger" *ngIf="myForm.controls[''phone''].hasError(''required'') && myForm.controls[''phone''].dirty">
phone is required
</p>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button>
</div>
</form>
</div>

componente.ts

import { FormGroup, FormBuilder, Validators } from ''@angular/forms'';
export class AppComponent implements OnInit {
myForm: any;
constructor(
private formBuilder: FormBuilder
) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
phone: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
});
}
}

Answer 5

Si desea validar un campo con varios validadores, debe probar esto

phone: ['''', Validators.compose([
Validators.required,
Validators.minLength(10),
Validators.maxLength(12)])
])],

Answer 6

Tengo un truco que funciona al 100%.

Defina la entrada de tipo ''texto'' y no ''número''.

Por ejemplo:

<input placeholder="OTP" formControlName="OtpUserInput" type="text">

A continuación, utilice el patrón que es parte de la validación.

Me gusta :

this.ValidOtpForm = this.formbuilder.group({
OtpUserInput: new FormControl(
{ value:'''', disabled: false },
[
Validators.required,
**Validators.minLength(6),
Validators.pattern(''[0-9]*'')**
]),
});

Esto significa que definimos el texto de tipo de entrada que es adecuado para la longitud mínima y también definimos el patrón (validación) para el valor numérico para que podamos lograr ambas validaciones.

Código restante:

<mat-error *ngIf="RegistrationForm.controls[''Password''].hasError(''minlength'')">Use 8 or more characters with a mix of letters</mat-error>
<mat-error *ngIf="ValidOtpForm.controls[''OtpUserInput''].hasError(''pattern'')">Please enter numeric value.</mat-error>

Answer 7

Utilice el método angular.io/api/forms/Validators , componga varios validadores en una sola función.

Actualice el archivo .TS como se muestra abajo,

this.myForm = this.formBuilder.group({ phone: ['''', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(12)])], message: ['''', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(100)])] });

Answer 8

Actualización 1:

phone: ['''', [Validators.required, Validators.min(10000000000), Validators.max(999999999999)]],

Lo usé como el siguiente y funcionó perfectamente:

 phone: ['''', [Validators.required, customValidationService.checkLimit(10000000000,999999999999)]],

CustomValidationService:

import { AbstractControl, ValidatorFn } from ''@angular/forms'';
export class customValidationService {
static checkLimit(min: number, max: number): ValidatorFn {
return (c: AbstractControl): { [key: string]: boolean } | null => {
if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {
return { ''range'': true };
}
return null;
};
}
}

Answer 9

<div nz-col [nzXs]="24" [nzSm]="12" nz-form-control nzHasFeedback>
<nz-input formControlName="password" [nzPlaceHolder]="''password''" [nzType]="''password''" [nzSize]="''large''" (ngModelChange)="validateConfirmPassword()">
</nz-input>
<div nz-form-explain *ngIf="getFormControl(''password'').dirty&&getFormControl(''password'').hasError(''minlength'')">Your password must be at least 5 characters long. </div>
<div nz-form-explain *ngIf="getFormControl(''password'').dirty&&getFormControl(''password'').hasError(''maxlength'')">Your password cannot exceed 15 characters. </div>
<div nz-form-explain *ngIf="getFormControl(''password'').dirty&&getFormControl(''password'').hasError(''required'')">Please input your password!</div>
</div>