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.

No plunker works fine as expected. – Eesa Apr 04 '16 at 11:17 — Eesa, Apr 04 '16 at 11:17

score 6 · Accepted Answer · edited May 23 '17 at 11:54

6

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

edited May 23 '17 at 11:54

Community

1
1

answered Apr 04 '16 at 11:40

Thierry Templier

198,364
44
396
360

In this way are you setting a validator for the whole formGroup? – smartmouse Nov 14 '16 at 08:54
1

Is `Control` deprecated? Should i use `FormControl` instead? – smartmouse Nov 14 '16 at 09:01

Angular2 - Form Validation on conditionally created input field

1 Answers1