title: Reactive forms in Angular: Two-way binding
body: <p>I have a problem with Reactive forms. Updating the model class when the User changes the input is straight forward. But I need to do the opposite way: programmatically change the model, and see the changes in the HTML form.</p>
  
  <p>The simplified code is:</p>
  
  <pre><code>this.user = new User();
  </code></pre>
  
  <p>And then:</p>
  
  <pre><code>this.form = this.fb.group({
        name: new FormControl(this.user.name, [Validators.required]),
        email: new FormControl(this.user.email, [Validators.required])    
      });
  </code></pre>
  
  <p>Assume that it is working fine. If the user updates the name in the GUI the <code>this.user.name</code> is being correctly updated.</p>
  
  <p>Assume that I have added some logic to User class, that populates the email based on the entered name. Every time the name changes, the email field is auto-generated as '<em>name</em>'@gmail.com</p>
  
  <p>Unfortunately the generated email is not visible in the GUI. How to achieve that? </p>
  
  <p>How to notify the <code>FormGroup</code> about changes in the User class?</p>
  
  <p>I had two ideas:</p>
  
  <p>1) Add ([ngModel]) - and it worked - but I feel that it is a bad idea to mix Reactive Forms with ngModel</p>
  
  <p>2) Add the following code, after the form is created:</p>
  
  <pre><code>this.form.controls["name"].valueChanges.distinctUntilChanged().subscribe(form =&gt; {
      this.form.patchValue({email: this.model.email});
  });
  </code></pre>
  
  <p>But it does not look clean. Is there any other option?</p>