Angular2：如果设置了单选按钮，则检查空表单答案

【问题标题】：Angular2: check empty form if radio button is setAngular2：如果设置了单选按钮，则检查空表单
【发布时间】：2017-01-31 12:54:06
【问题描述】：

我有一个 Angular2 子组件，它包含一个单选按钮和一个输入文本区域：

<div class="form-group" *ngIf="message" >
  <input type="text" class="form-control"
  required [(ngModel)]="message.message"
  name="message"/>

  <input type="radio" class="form-control"
   [checked] = "message.default == 1"
   [value] = "message.default"
   (change)="onSelectionChange(message)"
  name="default" >{{message.language}}<br>
</div>

父组件在带有提交按钮的表单中显示多于一个子组件（动态地）。现在，当我单击提交按钮时，如果其中一个孩子的文本区域为空，则会显示一条错误消息，但我只会在选中单选按钮时才显示该消息。我该怎么办？

【问题讨论】：

标签： javascript forms angular

【解决方案1】：

您可以再添加 1 个这样的条件

<div *ngIf="!message.message && message.default == 1">
  Error here...
</div>

【讨论】：

【解决方案2】：

你已经使用[(ngModel)]作为文本框，你也可以使用[(ngModel)]作为单选按钮

<input type="radio" class="form-control"
   [checked] = "message.default.value == 1"
   [value] = "message.default.value"
   (change)="onSelectionChange(message)"
   name="default"
   [(ngModel)]="message.default" >

然后就可以查看值了

【讨论】：