Tengo una entrada simple que está destinada a un número de teléfono y me gustaría validar que solo hay números y que la longitud es de 10 dígitos.
<input [(ngModel)]="client.phone" class="form-input" name="phone" type="phone" [value]="client.phone">
¿Qué puedo hacer para validar esto sin usar FormBuilder
? Parece que FormBuilder
simplemente complica las cosas y me gustaría validar esta entrada.
Con el validador de patrones incorporado es muy fácil:
<input [(ngModel)]="client.phone" pattern="[0-9]{10}" class="form-input" name="phone" type="phone" [value]="client.phone">
Aquí hay un ejemplo de mi curso de Pluralsight. Este primer ejemplo utiliza formularios controlados por plantillas. Está utilizando un patrón simple para validar la dirección de correo electrónico:
<div class="form-group" [ngClass]="{'has-error': (emailVar.touched || emailVar.dirty) && !emailVar.valid }"> <label class="col-md-2 control-label" for="emailId">Email</label> <div class="col-md-8"> <input class="form-control" id="emailId" type="email" placeholder="Email (required)" required pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+" [(ngModel)]="customer.email" name="email" #emailVar="ngModel" /> <span class="help-block" *ngIf="(emailVar.touched || emailVar.dirty) && emailVar.errors"> <span *ngIf="emailVar.errors.required"> Please enter your email address. </span> <span *ngIf="emailVar.errors.pattern"> Please enter a valid email address. </span> <!-- This one does not work --> <span *ngIf="emailVar.errors.email"> Please enter a valid email address. </span> </span> </div> </div>
Este ejemplo usa formularios reactivos para lo mismo.
this.customerForm = this.fb.group({ firstName: ['', [Validators.required, Validators.minLength(3)]], lastName: ['', [Validators.required, Validators.maxLength(50)]], email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+')]], sendCatalog: true });
Entonces, usar un patrón es en gran medida una técnica angular. Solo le indicaba el sitio HTML porque proporciona varias sugerencias de patrones de números de teléfono que puede elegir y usar en lugar de los patrones de correo electrónico que se muestran en mis ejemplos aquí.
Avíseme si desea el enlace al código de github asociado.
<input type="number" name="phone" max="10">
puede usar el número de tipo y el máximo