Angular2 - Form Validation on conditionally created input field

Question

I am creating a simple form where user can select two possible values i.e. Local and Foreigner. If user selects nothing it makes the value of the form invalid. If user selects Local the form becomes valid. If user selects Foreigner, a new field appears for taking country as input from user which is also required. If user enters nothing in the country input field this makes the form invalid.

I have tried creating the form as below:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Control,ControlGroup,FormBuilder,FORM_DIRECTIVES,Validators} from 'angular2/common';

@Component({
  selector: 'app',
  template: `
  <form [ngFormModel]="form" >
    <select [ngFormControl]="nationalityCtrl" >
      <option *ngFor="#nationality of nationalities" [value]="nationality" >{{nationality}}</option>
    </select><br>
    <input *ngIf="form.value.nationality == 'Foreigner'" type="text" [ngFormControl]="countryCtrl" placeholder="Country Name" />
    <button class="btn btn-primary" [disabled]="!form.valid" >Submit</button>
  </form>
  `,
  directives: [FORM_DIRECTIVES]
})
class MainApp{
  public nationalities = ["Foreigner","Local"];
  public form:ControlGroup;
  public nationalityCtrl:Control;
  public countryCtrl:Control;

  constructor(private _fb:FormBuilder){
  var self = this;

  this.nationalityCtrl = new Control("",Validators.compose([Validators.required]));
  this.countryCtrl = new Control("",Validators.compose([function(control:Control){
      if(self.nationalityCtrl.value == "Foreigner" && !control.value){
        return {invalid: true};
      }
    }]));

    this.form = this._fb.group({
      nationality: this.nationalityCtrl,
      country: this.countryCtrl
    });
  }
}
bootstrap(MainApp);

But as soon as I select the Foreigner option I get the following error on console:

EXCEPTION: Expression '!form.valid in MainApp@6:36' has changed after it was checked. Previous value: 'false'. Current value: 'true' in [!form.valid in MainApp@6:36]

I re-produced the problem on plunker here you can see the error message on the console.

Answer 1

I would define a global validator for the whole form since your validator depends on two fields:

this.form = this._fb.group({
  nationality: this.nationalityCtrl,
  country: this.countryCtrl
}, {
  validator: (control:Control) => {
    var nationalityCtrl = control.controls.nationality;
    var countryCtrl = control.controls.country;
    if(nationalityCtrl.value == "Foreigner" && !countryCtrl.value){
      return {invalid: true};
    }
  }
});

See this plunkr: https://plnkr.co/edit/Cksiv2UFbWoVJv2VwPwh?p=preview.

See this question for more details:

• Cross field validation in Angular2