title: Two way binding in reactive forms
body: <p>Using Angular 2, two-way binding is easy in template-driven forms - you just use the banana box syntax. How would you replicate this behavior in a model-driven form?</p>
  
  <p>For example, here is a standard reactive form. Let's pretend it's much more complicated than it looks, with lots and lots of various inputs and business logic, and therefore more appropriate for a model-driven approach than a template-driven approach.</p>
  
  <pre class="lang-js prettyprint-override"><code>    export class ExampleModel {
          public name: string;
          // ... lots of other inputs
      }
  
      @Component({
          template: `
              &lt;form [formGroup]="form"&gt;
                  &lt;input type="text" formControlName="name"&gt;
                  ... lots of other inputs
              &lt;/form&gt;
  
              &lt;h4&gt;Example values: {{example | json}}&lt;/h4&gt;
          `
      })
      export class ExampleComponent {
          public form: FormGroup;
          public example: ExampleModel = new ExampleModel();
  
          constructor(private _fb: FormBuilder) {
              this.form = this._fb.group({
                  name: [ this.example.name, Validators.required ]
                  // lots of other inputs
              });
          }
  
          this.form.valueChanges.subscribe({
              form =&gt; {
                  console.info('form values', form);
              }
          });
      }
  </code></pre>
  
  <p>In the <code>subscribe()</code> I can apply all sorts of logic to the form values and map them as necessary. However, I don't want to map every input value from the form. I just want to see the values for the entire <code>employee</code> model as it updates, in a approach similar to <code>[(ngModel)]="example.name"</code>, and as displayed in the json pipe in the template. How can I accomplish this?</p>