title: How to dynamically change the bound formControlName
body: <p>I have an angular 2 reactive form with four <code>formControl</code>s and only one input field. What I want is to ask the user to fill up the infos one by one. So I'm assigning the <code>firstControlName</code> to a property call <code>currentFormControlName</code> on <code>ngOnInit</code> and binding it with the input field in template file. When the user fills up his name the field will be valid and on submit I'll change the <code>currentFormControlName</code> property to next formControlName. But the problem is the binding isn't updating. The input field is still bound to <code>name</code>. When I type something on the input field the value of <code>name</code> is updating, not <code>email</code>.</p>
  <p>app.component.ts</p>
  <pre><code>ngOnInit() {
    this.form = this.builder.group({
      'name': ['', Validator.required],
      'email': ['', Validator.email],
      'phone': ['', Validator.required],
      'password': ['', Validator.required],
    });
    this.currentFormControlName = 'name';
  }
  
  submit() {
    this.currentFormControlName = 'email'; // Setting it manually just for the demo of this question.
  }
  </code></pre>
  <p>app.component.html</p>
  <pre><code>&lt;form [formGroup]=&quot;form&quot;&gt;
    &lt;input type=&quot;text&quot; [formControlName]=&quot;currentFormControlName&quot;&gt;
    &lt;input type=&quot;submit&quot; (click)=&quot;submit()&quot;&gt;
  &lt;/form&gt;
  </code></pre>