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

回答

相關問題