javascript - 如何使用 formControlName 执行 "twoDataBinding"？类似于 ng 模型

Question

我正在设置一个带有表单的模型，但是我在设置带有表单的“MyModel”时遇到了问题

这是为了优化表单的处理

public myModel = new MyModel();

this.myForm = this.formBuilder.group({
      firstName: new FormControl({
        value: this.myModel.firstName,
        disabled: false
      }),
      middleName: new FormControl({
        value: this.myModel.middleName,
        disabled: false
      }),
      lastName: new FormControl({
        value: this.myModel.lastName,
        disabled: false
      }),
      age: new FormControl({
        value: this.myModel.age,
        disabled: false
      })
    });

当我提交带有按钮的“提交”时，它会向我显示“this.myForm”以及我在表单中添加的元素但似乎我不会将连接建立为“TwoDataBinding”我也不想执行此代码，因为我认为它非常多余

还有

当涉及多种形式时，如果您决定更改或重构该对象的属性，则更糟

    this.myModel.firstName = this.myForm.controls['firstName'].value;
    this.myModel.lastName = this.myForm.controls['lastName'].value;
    this.myModel.middleName = this.myForm.controls['middleName'].value;
    this.myModel.age = this.myForm.controls['age'].value;

您可以在此处查看完整代码:https://stackblitz.com/edit/form-model-hammer一个表单模型，如果你想做修改，可以FORK分享，谢谢:

also for the purpose of avoiding this alert in the picture

Answer 1

如果你想使用双向绑定(bind)，你应该使用template-driven forms反而。它允许您使用 ngModel 创建双向数据绑定(bind)以读取和写入输入控制值。

reactive forms的原则遵循“单向”规则，即您遵循一种不可变的方法来管理表单的状态，这样模板和组件逻辑之间的关注点就会更加分离。您可以在上面的链接中阅读更多关于 react 形式的优势。

如果您认为响应式表单不是您想要的，您应该恢复使用模板驱动表单，如第一段所述。

需要注意的一点是，您不应该将 ngModel 与响应式(Reactive)形式一起使用，因为这会破坏不变性的目的。

但是，如果您打算坚持使用响应式表单，则可以通过这样做来简化代码:

1) 初始化和声明您的响应式表单。

this.myForm = this.formBuilder.group({
  firstName: [{value: this.myModel.firstName, disabled: true}],
  middleName: [this.myModel.middleName],
  lastName: [this.myModel.Name],
  age: [this.myModel.age],
});

2) 获取响应式表单数据:

// since the properties of myModel and myForm FormControl names are the same
this.myModel = {...this.myForm.value};

3) 更新响应式(Reactive)表单数据:

this.myForm.patchValue(this.myModel);