Angular2反应形式：验证* ngIf中的字段

Question

I have a form with md-select and md-radio-button fields. The options under radio button will be displayed according to the option selected in md-select. Please visit the plunker .

You can see I have created the form with the sub-organism radio-button field to be required. It works on the first load. But if we select any sub radio button option and then change the organism select box, the form is still valid, without having a valid sub-orgranism value. I need the form to be invalid, if the sub radio button is not checked. Please help.

Question 2 : Also in the plunk, please uncomment the following lines after line 47 in app.component.ts so that there will be a default value for the fields. The sub organism radio buttons will be displayed, but the selectbox will be blank. There is the selected value and thats the reason why sub organism fields are displayed. Not sure why the option is not selected for organisms md-select.

Answer 1

Add a change event to md-select so that if the selection changes, and the form was validated, you can reset the value of selected.sub_organism_id to null . That will make the form invalid.

Code snippets:

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

Update:

Like @WillHowell said in his comment, "md-select compares values by object reference not object value" which is true. I modified your data to an array-object relation, and md-select default value worked here .