Angular 2 : ReactiveForm Updating Model

我有一个 react 形式，我想直接填充我的模型。

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

在savePerson()函数中，我必须将personForm FormGroup中的值复制到Person对象。对于少数几个属性来说，这很好，但是如果我有很多属性，这将是另一回事。我如何简化此代码，以便:

随着表单值的更改，personForm值将自动复制到Person对象。

当用户按下“保存”按钮(随后调用personForm函数)时，save()值会自动复制到Person对象。通过这种方式，我的意思是不必将所有单个表单值都复制到我的模型(Person)对象中。

做到这一点的最佳方法是什么？我可以使用某种辅助工具吗？或者比这更简单？

非常感谢

日本电讯

最佳答案

在我的应用程序中，我这样做:

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

这会将ui形式的字段映射到基础对象。因此，您可以:

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