title: Angular2 - Form Validation on conditionally created input field
body: <p>I am creating a simple form where user can select two possible values i.e. <code>Local</code> and <code>Foreigner</code>. If user selects nothing it makes the value of the form <code>invalid</code>. If user selects <code>Local</code> the form becomes <code>valid</code>. If user selects <code>Foreigner</code>, 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 <code>invalid</code>.</p>
  
  <p>I have tried creating the form as below:</p>
  
  <pre><code>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: `
    &lt;form [ngFormModel]="form" &gt;
      &lt;select [ngFormControl]="nationalityCtrl" &gt;
        &lt;option *ngFor="#nationality of nationalities" [value]="nationality" &gt;{{nationality}}&lt;/option&gt;
      &lt;/select&gt;&lt;br&gt;
      &lt;input *ngIf="form.value.nationality == 'Foreigner'" type="text" [ngFormControl]="countryCtrl" placeholder="Country Name" /&gt;
      &lt;button class="btn btn-primary" [disabled]="!form.valid" &gt;Submit&lt;/button&gt;
    &lt;/form&gt;
    `,
    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" &amp;&amp; !control.value){
          return {invalid: true};
        }
      }]));
  
      this.form = this._fb.group({
        nationality: this.nationalityCtrl,
        country: this.countryCtrl
      });
    }
  }
  bootstrap(MainApp);
  </code></pre>
  
  <p>But as soon as I select the <code>Foreigner</code> option I get the following error on console:</p>
  
  <blockquote>
    <p>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]</p>
  </blockquote>
  
  <p>I re-produced the problem on <a href="http://embed.plnkr.co/ApkaTy4ngsWXU7Vs6kt9/" rel="nofollow">plunker here</a> you can see the error message on the console.</p>