javascript - Angular-如何动态输出验证

Question

我想访问类 ng-touched 和 ng-valid 以打印错误消息，但不知道如何访问。这是我的代码-

 <form #individual="ngForm">
    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" class="form-control" id="name" ngModel name="name" pattern="[a-zA-Z ]*" required placeholder="Enter Your Name">
      <label *ngIf="!individual.control.name.valid">INVALID</label>
    </div>
    <button type="submit" class="btn" (click)="onSave(individual)" [disabled]="!individual.valid">SUBMIT</button>
 </form>

Answer 1

在输入上添加一个局部变量，它将监视模型的变化，然后您可以检查它的有效性:

<input type="text"  #myModel="ngModel"  class="form-control" id="name" ngModel name="name" pattern="[a-zA-Z ]*" required placeholder="Enter Your Name">
<label *ngIf="myModel.invalid">INVALID</label>

或

<label *ngIf="!myModel.valid">INVALID</label>

DEMO