良好做法 angular 响应式表单，编辑对象

Question

我一直在学习使用 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 属性（因为我们没有不要在表格中使用它）。

我只想知道在这种情况下最佳实践是什么。

Answer 1

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

In the documentation, under "Key differences"，你会发现它们的目的截然不同。

综上所述，模板驱动直接更新模型，而反应式复制模型并更新模型的副本。

如果你想用反应形式更新你的模型，你可以按需进行（例如，在进行 HTTP 调用之前）。

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

良好做法 angular 响应式表单，编辑对象

Good practices angular reactive forms, edit an object

angular

angular-reactive-forms