html Angular_FORM_VALIDATION（Temple驱动表格）

Posted 2021-05-11

<form novalidate #form="ngForm" (ngSubmit)="onSubmitForm(form)">
  <div class="container">
    <div class="form-group">
      <label >Name</label>
      <input type="text" class="form-control"
             [(ngModel)]="user.name" name="name"
             #userNameForForm = "ngModel"
             minlength="5"
             required >
      <!--pop-up validation-->
      <div *ngIf="userNameForForm.errors?.required && userNameForForm.touched" class=" alert alert-danger">
            Name is required
      </div>
      <div *ngIf="userNameForForm.errors?.minlength && userNameForForm.touched"
           class=" alert alert-danger">
       Name should be at least 5 characters
      </div>
    </div>
    <div class="form-group">
      <label >Email</label>
      <input type="email" class="form-control"
             [(ngModel)]="user.email" name="email"
             #userEmailForForm = "ngModel"
             required  >
      <div *ngIf="userEmailForForm.errors?.required && userNameForForm.touched" class=" alert alert-danger">
       Email is required
      </div>

    </div>
    <div class="form-group">
      <label >Phone</label>
      <input type="number" class="form-control"
             [(ngModel)]="user.phone" name="phone"
             #userPhoneForForm = "ngModel"

            >
      <div *ngIf="userPhoneForForm.errors?.required && userPhoneForForm.touched " class=" alert alert-danger">
       Phone  should be at least 3 numbers
      </div>
    </div>
    <input type="submit" value="Submit" class="btn btn-success" >
  </div>

</form>