如果 angular 中的表单存在错误，则显示消息 2

Question

我有以下表格，我需要在用户单击“保存”后，一条错误消息显示在所需的单选按钮组旁边（但未选择单选按钮）。我尝试了以下但它根本不显示消息。

<form #formList="ngForm" (ngSubmit)="Save(formList)">
    <div *ngFor="let item of data">
      <p>{{item.name}}</p>
      <input type="radio" name="{{item.id}}" [value]="1" [(ngModel)]="item.isSelected" required>Foo
      <input type="radio" name="{{item.id}}" [value]="2" [(ngModel)]="item.isSelected">Bar
      <div *ngIf="formList.controls.item?.id.required">
        The radio is required!
      </div>
    </div>
  <button type="submit">Save</button>
</form>

Answer 1

试试这个代码

<form #formList="ngForm" (ngSubmit)="Save(formList)">
    <div *ngFor="let item of data">
      <p>{{item.name}}</p>
      <input type="radio" name="{{item.id}}" [value]="1" [(ngModel)]="item.isSelected" required>Foo
      <input type="radio" name="{{item.id}}" [value]="2" [(ngModel)]="item.isSelected">Bar
      <div *ngIf="!formList.form.valid">
        The radio is required!
      </div>
    </div>
  <button type="submit">Save</button>
</form>

如果 angular 中的表单存在错误，则显示消息 2

Show message if there is an error in the form in angular 2

angular2-forms