良好实践角度反应形式，编辑对象答案

【问题标题】：Good practices angular reactive forms, edit an object良好实践角度反应形式，编辑对象
【发布时间】：2018-12-03 10:56:33
【问题描述】：

我一直在学习在 Angular 7 中使用反应形式，但在理解如何使用它时遇到了一些麻烦。

例子：

Export class Person {
    id: string, 
    name: string
}

Export class myFormComponent implememts OnInit {

    personForm: FormGroup;
    @Input()
    person: Person;

    Constructor(private fb: FormBuilder) {} 

    NgOnInit() {
       this.personForm = this.fb.group({
          name: [this.person.name, [Validators.required]]
       });
    } 
}

<form [formGroup]="personForm" >
    <input formControlName="name" >
</form>

我的组件输入要编辑的人员对象，但由于我们没有使用([ngModel])，因此在组件参数中传递的人员模型内部没有修改值。

现在我知道我们可以在提交时读取表单的值并一一影响对属性的更改或通过影响所有表单值但这意味着我们缺少 id 属性（因为我们不使用它的形式）。

我只是想知道在这种情况下最好的做法是什么。

【问题讨论】：

什么是this.name 不应该是this.person.name？
是的，抱歉，它应该将人名作为默认值。由于该网站已被我的公司屏蔽，因此不得不在智能手机上写此内容。

标签： angular angular-reactive-forms

【解决方案1】：

反应式表单和模板驱动表单的原理非常不同：您无法真正比较它们并期望两者具有相同的东西。

In the documentation, under "Key differences"，你会发现他们都有非常不同的目的。

总而言之，模板驱动直接更新模型，而响应式表单复制模型并更新模型副本。

如果您想使用响应式表单更新您的模型，您可以按需进行（例如，在进行 HTTP 调用之前）。

它们都有其优点和缺点，您应该相应地使用它们。它们是互补的，而不是竞争的。

【讨论】：

我明白了。我看到反应式控制更灵活、更清晰，所以我同意了。因此，作为最佳实践，我只需将 id 属性添加到表单中（而不是在模板中使用它），这样我就可以将所有表单属性分配给人员模型，或者我是否获取人员对象并一一修改所有属性？
@lolplayer101 一个 ID 不应该被修改，但是如果你想修改它，那么是的，你必须将它添加到你的表单中。
也许我不清楚，就是这样，我不想修改它。我什至不想展示它。我想知道是否应该将所有单独的表单控件值分配给我的人员模型或将 id 添加到 personForm 以便在提交时一次性将所有值从 personForm 传递到我的人员模型。
您可以使用builder.group(this.person)，它会一次创建所有字段（您不需要对它们进行硬编码）。您的 ID 将存储在 form.value 中，但只要您不创建 input formControlName="id"，它就永远不会显示，并且任何 lambda 用户都无法修改它。您也可以在创建表单后手动禁用它，甚至在创建时！
视情况而定，如果您使用builder.group(this.person)，则必须致电form.get(fieldName).setValidators([validators])。否则，您可以使用builder.group({ name: ['', [validators]] })