Angular2 Reactive Form：验证里面的字段* ngIf

我有一个带有md-select和md-radio-button字段的表单。单选按钮下的选项将根据在md-select中选择的选项显示。请访问plunker。Angular2 Reactive Form：验证里面的字段* ngIf

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

问题2：同样在plunk中，请取消app.component.ts中第47行后面的以下行，以便为字段设置默认值。子有机体单选按钮将显示，但选择框将为空白。有选择的价值，这就是为什么亚有机体字段显示的原因。不知道为什么该选项没有选择生物体md-select。

来源

2017-07-19 Jithin

对于问题2，plunk显示使用带有NgModel的FormControl。它们是互斥的，所以只能使用一个。还要注意，md-select通过* object reference *而不是对象值来比较值 –

一个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在他的评论中所说的，“md-select通过对象引用而不是对象值来比较值”，这是正确的。我将你的数据修改为一个数组对象关系，并且md-select默认值可以工作here。

来源

2017-07-19 15:07:02 Nehal

感谢您的回复，我得到了第一部分的工作。最后一个plunker链接与key：object关系是一样的。如果你可以粘贴一个工作的，这将是非常好的，因为我不能让question2工作。 – Jithin

对不起，我为第二部分添加了正确的链接。让我知道你的想法 – Nehal

Angular2 Reactive Form：验证里面的字段* ngIf

回答

相关问题