Angular2 Reactive Form:验证里面的字段* ngIf
问题描述:
我有一个带有md-select
和md-radio-button
字段的表单。单选按钮下的选项将根据在md-select中选择的选项显示。请访问plunker。Angular2 Reactive Form:验证里面的字段* ngIf
你可以看到我已经创建了需要的子生物体单选按钮字段的表单。它适用于第一次加载。但是,如果我们选择任何子单选按钮选项,然后更改生物体选择框,则表单仍然有效,而没有有效的子未结果值。如果没有选中子单选按钮,我需要表单无效。请帮忙。
问题2:同样在plunk中,请取消app.component.ts中第47行后面的以下行,以便为字段设置默认值。子有机体单选按钮将显示,但选择框将为空白。有选择的价值,这就是为什么亚有机体字段显示的原因。不知道为什么该选项没有选择生物体md-select。
答
一个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;
};
}
更新:
像@WillHowell在他的评论中所说的,“md-select通过对象引用而不是对象值来比较值”,这是正确的。我将你的数据修改为一个数组对象关系,并且md-select默认值可以工作here。
对于问题2,plunk显示使用带有NgModel的FormControl。它们是互斥的,所以只能使用一个。还要注意,md-select通过* object reference *而不是对象值来比较值 –