Pattern validation

Author: gopinav

template-driven-forms/src/app/app.component.html

@@ -15,7 +15,7 @@ <h2>Bootcamp Enrollment Form</h2>
 
     <div class="form-group">
       <label>Phone</label>
-      <input type="tel" class="form-control" name="phone" [(ngModel)]="userModel.phone">
+      <input type="tel" #phone="ngModel" pattern="^\d{10}$" class="form-control" [class.is-invalid]="phone.invalid && phone.touched" name="phone" [(ngModel)]="userModel.phone">
     </div>
 
     <div class="form-group">