模板驱动的表单验证发行

Question

我创建了一个模板驱动的表单，该表单具有一些验证。页面加载时，将显示验证消息，而无需用户交互。现在我要，当用户开始填写表格时会显示错误消息。

我通过使用ngIf =“ form.submitted”实现此目的。但是，当用户按下Enter键后填写完整的表格时，就会出现错误。但是我想在用户单击输入框时显示错误消息。

    <div class="container registerForm">
  <div class="usericon d-flex justify-content-center">
      <i class="fa fa-5x fa-user-circle" aria-hidden="true"></i>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="jumbotron">
        <form class="form-horizontal" #regForm="ngForm" >
          <div class="form-group">
            <label for="">Name</label> <span class="text-danger ml-2" *ngIf="username.invalid || (username.dirty && username.touced)">Invalid Name*</span>
            <input type="text" name="user_name" id="user_name" class="form-control" placeholder="" [(ngModel)]="user.name"  #username="ngModel" required>
            <small id="helpId" class="text-muted ">Enter Full Name</small>
          </div>
          <div class="form-group">
            <label for="">Email Address</label> <span class="text-danger ml-2" *ngIf="mail.invalid || (mail.dirty && mail.touced)">Invalid Email Address*</span>
            <input type="text" name="email" id="email" class="form-control" placeholder="" [(ngModel)]="user.email" #mail="ngModel" email required>
            <small id="helpId" class="text-muted  ">Enter Valid Email Address</small>
          </div>
          <div class="form-group">
            <label for="">Contact Number</label> <span class="text-danger ml-2" *ngIf="contact.invalid || (contact.dirty && contact.touced)">Invalid Contact Number*</span>
            <input type="number" name="cNumber" id="cNumber" class="form-control" placeholder="" [(ngModel)]="user.contact" #contact="ngModel" pattern="^[7-9]{2}[0-9]{8}$" required >
            <small id="helpId" class="text-muted ">Enter Contact Number</small>
          </div>
          <div class="form-group"> 
            <label for="">Password</label> <span class="text-danger ml-2" *ngIf="password.invalid || (password.dirty && password.touced)">Invalid Password*</span>
            <input type="password" name="password" id="password" class="form-control" placeholder="" [(ngModel)]="user.password" #password="ngModel" required >
            <small id="helpId" class="text-muted ">Enter Password </small>
          </div>
          <div class="form-group"> 
            <label for="">Upload Image</label>
            <input type="file" name="img" id="img" class="form-control" placeholder="" [(ngModel)]="user.image" >

          </div>          
          <div class="form-group d-flex justify-content-end">
            <button class="btn" [disabled]="regForm.invalid" [ngClass]="{'btn-success': regForm.valid}" (click)="registerUser()">Sign Up</button>

          </div>
        </form>
      </div>
    </div>
  </div>
</div>