我对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类添加了一些逻辑,它根据输入的名称填充电子邮件.每次更改名称时,电子邮件字段都会自动生成为’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});
});
但它看起来并不干净.还有其他选择吗?
解决方法:
这不仅仅是反应形式的工作方式.
对于反应形式,表单不会绑定到您的模型,它有自己的模型,如果您查看“form.value”,您可以看到它.
在创建表单控件时传递给它的值没有绑定,它只是用作表单控件的初始值.
目的是用户填写表单,动态发生验证(即被动部分),然后当他们提交表单时,您将表单的值一次性转移到模型中.
也就是说,如果要更新表单控件的值,patchValue确实是正确的方法.