Angular2 - Form Validation on conditionally created input field

Question

I am creating a simple form where user can select two possible values ie 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