Question

（Google中文译成英文）劳驾， Angular的动态表单如何绑定到已定义的数据模型对象以实现表单数据对模型对象的实时响应类似于Angular的双向绑定效果。

（Google中文译成英文）我定义了数据模型对象，定义了动态表单对象，然后将数据模型对象绑定到了动态模型。但是，动态表单的表单值未映射到绑定的数据模型对象。

{{1}}

将HTML绑定到表单时，可以将表单数据直接更改为this.studentModel.Name属性。

Answer 1

如果我没看错，问题是每次表单更改模板中的值时如何更新# Plot regression line plt.plot(prediction_space, y_pred, color='black', linewidth=3) plt.show()，如果this.studentModel.Name已更改，如何更新validateForm.controls['Name']。您需要以Angular反应形式手动进行。在这里，您只需为this.studentModel.Name设置一个初始值：

Name

通过valueChanges可观察到的信息，您可以在模板中侦听表单值的更改。因此，要从ngOnInit(): void { this.validateForm = this._fb.group({ Name: [this.studentModel.Name] }) } validateForm获取更新的值，您可以订阅valuveChanges并更新Name this.studentModel属性：

Name

要更新this.validateForm.get('Name').valueChanges.subscribe(val => { // here goes all update related code this.studentModel.Name = val; });控制值，可以使用validateForm：

patchValue

Answer 2

听起来@vadi拥有您想要的答案。

但是如果那不是你要的...

如果要在填写表单后询问如何将表单值与模型值进行匹配，则可以执行以下操作：

const updatedStudent = { ...this.studentModel, ...this.validateForm.value };

这将从原始模型中获取数据，包括表单上可能未显示的任何属性（例如，您的模型具有id属性。）

然后使用表单中值中的任何用户输入覆盖模型数据。

结果是具有更新值的对象。然后，您可以使用该对象将其放入/存储到数据存储中。

更新

您的问题的答案是“否”，反应形式不是具有双向绑定。

反应形式的主要点是不变性。因此，它故意不更新您的模型。

如果您要查看表单的任何更改，可以使用以下方法：

this.validateForm.valueChanges.subscribe(val => {
  // here goes all update related code
});

但是如果您真的需要在用户进行更改时进行模型更改，并且希望进行双向绑定，请考虑使用模板驱动的表单。

Answer 3

（当前中国时间15：21，Google翻译）非常感谢您的回复。实际上，我的数据模型定义了十几个模型。问题中的示例仅是演示。我不想以这种方式一一绑定相应的值，也不想这样：

Class StudentModel{
      Name:string,
      Age:string,
      Birth:moment
      ..... (many attributes)
    }

    Class OneComponent implements OnInit{
      Public validateForm :FormGroup;

      Public studentModel:StudentModel={ Name:'XiaoMing' }

      Constructor(
         Private _fb: FormBuilder
       ) {}

       ngOnInit(): void {
        /**Form initial assignment */
       this.validateForm = this._fb.group({
          Name: [this.studentModel.name],
          Age: [this.studentModel.age],
          Birth: [this.studentModel.birth],
          .......(many form definitions)
       })
      }

 ///When saving the form, assign the values in the form to the data model.
 ///Because the remote interface method parameters are called, the requirement is the 
 ///Strong Type parameter of the Student
     Public ToSave():void{
       //This talks about using a loash.js library.
       // Assign the object value on this.validateForm.getRawValue to
       //this.studentModel object
       assignIn(
          this.studentModel,
          this.validateForm.getRawValue
       )
     }
    }

实际上，我希望ngModel可以像模板形式一样在两个方向上绑定。当UI输入的值更改时，与表单绑定相对应的数据模型对象同时更改。但是似乎动态表单似乎不支持此机制，您需要手动获取值并将其分配给指定的模型对象。谢谢您的帮助~~~~ @ DeborahK和@Vadi

Angular动态形式如何绑定到变量；

3 个答案: