Question

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

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）对象。

实现这一目标的最佳方法是什么？我可以使用某种助手还是比这更简单？

非常感谢

JT

Answer 1

在我的应用中，我做到了这一点：

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

这将ui形式的字段映射到底层对象。所以你可以：

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

Angular 2：ReactiveForm更新模型

1 个答案: