Angular2 Reactive Form：验证 *ngIf 中的字段

Question

我有一个包含 md-select 和 md-radio-button 字段的表单。单选按钮下的选项将根据md-select中的选项select显示。请访问plunker。

您可以看到我已经创建了表单，其中包含需要的子生物单选按钮字段。它适用于第一次加载。但是，如果我们 select 任何子单选按钮选项，然后更改有机体 select 框，表单仍然有效，但没有有效的子有机体值。如果未选中子单选按钮，我需要表单无效。请帮忙。

问题 2：同样在 plunk 中，请取消注释 app.component.ts 中第 47 行之后的以下行，以便字段有默认值。将显示子生物单选按钮，但 select 框将为空白。有 selected 值，这就是显示子生物字段的原因。不确定为什么该选项未 selected for organisms md-select.

Answer 1

将 change 事件添加到 md-select 以便如果 selection 发生变化并且表单已验证，您可以将 selected.sub_organism_id 的值重置为 null。这将使表单无效。

代码片段：

html:

<md-select [formControl]="form.controls['organism']" 
           style="width:100%;" 
           [(ngModel)]="selected.organism_id" 
           (change)="resetForm($event)">
  <md-option *ngFor="let organism_id of getIds()" [value]="organism_id">
    {{ organisms[organism_id].name }}
  </md-option>
</md-select>

ts:

resetForm(org){
  if(this.form.valid){
    this.selected.sub_organism_id = null;
  };  
}

Edited Plunk

更新：

就像@WillHowell 在他的评论中所说的那样，"md-select compares values by object reference not object value" 是正确的。我将您的数据修改为数组对象关系，并且 md-select 默认值有效 here。

Angular2 Reactive Form：验证 *ngIf 中的字段

Angular2 Reactive Form : Validate fields inside *ngIf

javascript

angularjs

angular-material2

angular-reactive-forms