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
– Eesa

2016-04-04 11:17:17 +00:00
Commented Apr 4, 2016 at 11:17 — Eesa
– Eesa, Commented Apr 4, 2016 at 11:17

Community · Accepted Answer · 2017-05-23 11:54:13Z

7

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, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 4, 2016 at 11:40

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

smartmouse Over a year ago

In this way are you setting a validator for the whole formGroup?

smartmouse Over a year ago

Is Control deprecated? Should i use FormControl instead?

Collectives™ on Stack Overflow

Angular2 - Form Validation on conditionally created input field

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related