Question

我对Reactive表单有疑问。用户更改输入时更新模型类是直截了当的。但我需要采取相反的方式：以编程方式更改模型，并查看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类添加了一些逻辑，它根据输入的名称填充电子邮件。每次更改名称时，电子邮件字段都会自动生成为“名称”@ 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

这不是反应形式的工作方式。

对于反应形式，表单不会绑定到您的模型，它有自己的模型，如果您查看＆＃34; form.value＆＃34;就可以看到。

在创建窗体控件时传递给窗体控件的值不受约束，它只是用作窗体控件的初始值。

目的是用户填写表格，动态验证（反应部分），然后当他们提交表格时，您将表格的价值转移到您的模型，所有马上。

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

Angular中的反应形式：双向绑定

1 个答案: