Estoy tratando de simplemente replicar el tutorial del sitio web de Angular, pero no puedo hacer que funcione la validación de longitud:
<input style="display:inline-block;min-width:150px" class="form-input" id="phone" required minlength="4" maxlength="24" type="number" name="phone" [(ngModel)]="client.phone" #phone="ngModel" /> <!-- required works, minlength and maxlength always false --> {{ phone.hasError('required') }} {{ phone.hasError('minlength') }} {{ phone.hasError('maxlength') }} <div *ngIf="phone.errors && (phone.dirty || phone.touched)" class="alert alert-danger"> <div [hidden]="!phone.errors.required"> Name is required </div> <div [hidden]="!phone.errors.minlength"> Name must be at least 4 characters long. </div> <div [hidden]="!phone.errors.maxlength"> Name cannot be more than 24 characters long. </div> </div> Debo estar perdiendo algo simple, pero por alguna razón, la validación required cambia según la entrada, pero tanto minlength como la longitud maxlength siempre son false , independientemente de la duración de mi entrada.
Es porque el tipo de número no tiene propiedad de longitud
Hay un error para esto https://github.com/angular/angular/issues/15053
Puedes solucionarlo como:
[ngModel]="client.phone" (ngModelChange)="client.phone = $event + ''"Actualizar
Dado que en 4.2.0-beta.0 (2017-05-04) se introdujeron validadores mínimo y máximo para que pueda echar un vistazo