Выпуск проверки формы на основе шаблона

Question

Я создал шаблонную форму, которая имеет некоторую проверку.При загрузке страницы сообщение проверки будет отображаться без участия пользователя.Теперь я хочу, чтобы при заполнении формы пользователь отображал сообщение об ошибке.

Я добился этого с помощью ngIf = "form.submitted".Но это даст ошибку, когда пользователь заполнит полную форму после нажатия на кнопку ввода.Но я хочу отобразить сообщение об ошибке, когда пользователь нажимает на поле ввода.

    <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>