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

时间:2017-07-19 10:43:58

标签: javascript angularjs angular-material2 angular-reactive-forms

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

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

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

1 个答案:

答案 0 :(得分: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