Angular 2: ReactiveForm Aktualizowanie Model

Question

Mam formę reaktywną, którą chciałbym bezpośrednio wypełnić mój 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); 
    } 
} 

W funkcji savePerson() mam skopiować wartości z personForm FormGroup do osoby obiekt. Dla kilku właściwości jest to w porządku, ale jeśli mam wiele właściwości, będzie to po prostu kolejna rzecz do zarządzania. W jaki sposób mogę uprościć ten kod, tak aby:

1. Wartości personForm są automatycznie kopiowane do obiektu Person w miarę zmiany wartości formularza.
2. Wartości personForm są automatycznie kopiowane do obiektu Person po naciśnięciu przez użytkownika przycisku "zapisz" (który następnie wywołuje funkcję save(). Rozumiem przez to, że nie muszę kopiować wszystkich indywidualnych wartości formularza do mojego modelu (Osoba) obiektu.

Jaki jest najlepszy sposób, aby to się stało? Czy istnieje jakiś pomocnik mogę używać, czy jest to prostsze niż to?

Dziękujemy

JT

Answer 1

W moim app, mam zrobić tak:

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

ten odwzorowuje pola w postaci ui bazowego obiektu. Możesz więc:

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