Question

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

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

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

Answer 1

向change添加md-select个事件，以便在选择更改并且表单经过验证后，您可以将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在评论中所说，＆＃34; md-select按对象引用比较值而不是对象值＆＃34;这是真的。我将您的数据修改为数组 - 对象关系，md-select默认值工作here。

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

1 个答案: