如何使用反应形式将表格绑定到Angular 6中的模型？

Question

在成角度6之前，我曾[(ngModel)]用来直接将表单字段绑定到模型。现在不推荐使用（不能用于反应式表单），而且我不确定如何用表单值更新模型。我可以使用，form.getRawValue()但是这需要我用新的rawValue替换当前模型-这是不利的，因为我的主模型比本地表单模型更大并且具有更多的字段。

有任何想法吗？

Answer 1

正如解释更充分地角文档，以反应形式，你不这样做的形式直接绑定到你的模型。而是，您使用FormBuilder构建一个FormGroup对象（本质上是“表单”），该对象将维护其自己的模型。在施工过程中，您有机会在形式，你通常会做，从设定的初始值的模型。

然后，将模板中的表单控件绑定到表单模型。用户与表单控件的交互将更新表单的模型。

当您准备对表单数据进行某种处理（例如“提交”表单）时，可以使用FormGroup的value属性或getRawValue（）方法从表单字段中获取值-这两个行为不同，请参见有关详细信息的文档。

一旦你从形式获取值，如果你愿意，你可以更新您从表单中的值模型。

Answer 2

如果要绑定到文本输入之类的表单控件，请像使用其他任何反应形式一样使用此语法：

<ng-container [formGroup]="this.myFormGroup">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="field2">
    <ng-container formGroupName="subgroupName">
        <input type="text" formControlName="subfield2">
    </ng-container>
</ng-container>

在您的组件类中constructor()（应在模板呈现之前），使用以下语法来构建一个表单组以与该表单进行对话：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

...
    constructor(private formBuilder: FormBuilder) {
        this.myFormGroup = this.formBuilder.group({
            field1: [],
            field2: [],
            subgroupName: this.formBuilder.group({
                subfield2: [],
            }),
        });
        this.retrieveData();
    }

如果您的组件需要在加载时从服务中检索数据，则必须确保它在构建表单后开始传输，然后用于patchValue()将来自对象的数据放入FormGroup：

    private retrieveData(): void {
        this.dataService.getData()
            .subscribe((res: SomeDataStructure) => {
                this.myFormGroup.patchValue(res);
            });
    }

与的模型的只读数据绑定的FormGroup访问方式有所不同：

{{ this.myFormGroup.get('field1').value }}
{{ this.myFormGroup.get('subgroupName.subfield2').value }}
<!-- Hint: use an array if you have field names that contain "." -->
{{ this.myFormGroup.get(['subgroupName', 'subfield2']).value }}

所有这些技术消除了对任何[(ngModel)]绑定的需求。