title: Angular 2: ReactiveForm Updating Model
body: <p>I have a reactive form which I would like to directly populate my model.</p>
  
  <p><strong>form.component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="personForm" (ngSubmit)="savePerson()"&gt;
      &lt;md-card class="app-input-section"&gt;
          &lt;md-input formControlName="personName" placeholder="Person Name"&gt;&lt;/md-input&gt;
          ... many more fields
          &lt;button md-raised-button color="primary"&gt;Save&lt;/button&gt;
      &lt;/md-card&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>form.component.ts</strong></p>
  
  <pre><code>@Component({
      selector: 'person',
      template: 'form.component.html'
  })
  
  export class FormComponent implements OnInit {
  
      person: Person;
      formBuilder: FormBuilder;
      personForm: FormGroup;
  
      constructor(formBuilder: FormBuilder, personService: PersonService) {
          this.person = new Person();
          this.personForm = formBuilder.group({
              personName: [this.person.personName, Validators.required],
              ... many more properties for form
          });
      }
  
      ngOnInit() {
          console.log('ngOnInit() called');
      }
  
      savePerson() {
          this.person.personName = this.personForm.value.personName;
          ... many more properties set
          this.personService.savePersontoDB(this.person);
      }
  }
  </code></pre>
  
  <p>In the <code>savePerson()</code> function I am having to copy the values from the <code>personForm</code> FormGroup to the Person object. For a handful of properties this is fine however if I have many properties this will be just another thing to manage. How can I simplify this code so that either:</p>
  
  <ol>
  <li>the <code>personForm</code> values are automatically copied to the Person object as the form values change. </li>
  <li>the <code>personForm</code> values are automatically copied to the Person object when the user presses the "save" button (which subsequently calls the <code>save()</code> function. By this, I mean not having to copy all of the individual form values to my model (Person) object.</li>
  </ol>
  
  <p>What is the best way to make this happen? Is there some kind of helper I can use or is it simpler than this?</p>
  
  <p>Many thanks</p>
  
  <p>JT</p>