Angular 2: ReactiveForm Updating Model

Question

I have a reactive form which I would like to directly populate my model.

form.component.html

<form [formGroup]="personForm" (ngSubmit)="savePerson()">
    <md-card class="app-input-section">
        <md-input formControlName="personName" placeholder="Person Name"></md-input>
        ... many more fields
        <button md-raised-button color="primary">Save</button>
    </md-card>
</form>

form.component.ts

@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);
    }
}

In the savePerson() function I am having to copy the values from the personForm 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:

1. the personForm values are automatically copied to the Person object as the form values change.
2. the personForm values are automatically copied to the Person object when the user presses the "save" button (which subsequently calls the save() function. By this, I mean not having to copy all of the individual form values to my model (Person) object.

What is the best way to make this happen? Is there some kind of helper I can use or is it simpler than this?

Many thanks

JT

Answer 1

In my app, I have done this:

 this.selectedPhysical = <Physical>this.physicalForm.value;

this maps the fields in the form ui to the underlying object. So you could:

this.person = <Person>this.personForm.value;
this.personService.savePersontoDB(this.person);