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