Angular 中的响应式表单：双向绑定

Question

我对响应式表单有疑问。当用户更改输入时更新模型类是直截了当的。但我需要做相反的事情：以编程方式更改模型，并查看 HTML 表单中的更改。

简化代码为：

this.user = new User();

然后：

this.form = this.fb.group({
      name: new FormControl(this.user.name, [Validators.required]),
      email: new FormControl(this.user.email, [Validators.required])    
    });

假设它工作正常。如果用户在 GUI 中更新名称，则 this.user.name 正在正确更新。

假设我已经向 User 类添加了一些逻辑，它会根据输入的名称填充电子邮件。每次更改名称时，电子邮件字段都会自动生成为 'name'@gmail.com

很遗憾，生成的电子邮件在 GUI 中不可见。如何做到这一点？

如何通知FormGroup User 类的变化？

我有两个想法：

1) 添加 ([ngModel]) - 它起作用了 - 但我觉得将 Reactive Forms 与 ngModel 混合使用是个坏主意

2) 在表单创建后添加以下代码：

this.form.controls["name"].valueChanges.distinctUntilChanged().subscribe(form => {
    this.form.patchValue({email: this.model.email});
});

但它看起来并不干净。还有其他选择吗？

Answer 1

这不是响应式表单的工作方式。

使用响应式表单，表单不会绑定到您的模型，它有自己的模型，您可以查看“form.value”。

在创建表单控件时传递给表单控件的值没有被绑定，它只是用作表单控件的初始值。

目的是用户填写表单，动态进行验证（即反应部分），然后当他们提交表单时，您将表单的值一次性传递给您的模型。

也就是说，如果要更新表单控件的值，patchValue 确实是正确的方法。