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

如果要使用双向绑定，则应改用template-driven forms。它允许您使用ngModel创建双向数据绑定以读取和写入输入控制值。

reactive forms的原则遵循“单向”规则，即遵循不变的方法来管理表单状态，从而使模板和组件逻辑之间的关注点更加分离。您可以在上面的链接上阅读更多有关反应式表格优点的信息。

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

需要注意的一件事是，您不应将ngModel与反应形式一起使用，因为这会破坏不变性的目的。

但是，如果您打算坚持使用反应式表单，则可以通过执行以下操作来简化代码：

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）更新反应形式数据：

this.myForm.patchValue(this.myModel);

Answer 2

您应该停止使用ngModel和Reactive表单，因为现在已弃用。您可以简化如下代码：

this.myModel.firstName= 'FIRST NAME';
    this.myForm = this.formBuilder.group({
      firstName:[{
        value: this.myModel ? this.myModel.firstName : '',
        disabled: false
      }],
      middleName: [{
        value: this.myModel ? this.myModel.middleName : '',
        disabled: false
      }],
      lastName: [{
        value: this.myModel ? this.myModel.lastName : '',
        disabled: false
      }],
      age:[{
        value: this.myModel ? this.myModel.age : '',
        disabled: false
      }]
    });

收听(ngOnSubmit)事件并编写一个函数来保存表单值。这可以通过以下方式实现：

  save(myForm : any){
    let form = myForm as MyModel;
    console.log(form);
    form.otherProperties = 'nothing';
  }

或：

  save(myForm : MyModel){
    let form = JSON.parse(JSON.stringify(myForm)); //for copy
    console.log(form);
    form.otherProperties = 'nothing';
    console.log( 'added a new property', form);
  }

在您的html中：

<div>
  <form [formGroup]="myForm" (ngSubmit)='save(myForm.value)'>
    <label>
      <span>
        Fisrt name:
      </span>
      <input type="text" formControlName="firstName">
    </label>
    <label>
      <span>
        Middle name
      </span>
      <input type="text" formControlName="middleName">
    </label>
    <label>
      <span>
        Last name
      </span>
      <input type="text" formControlName="lastName">
    </label>
    <label>
      <span> Age: </span>
      <input type="number" formControlName="age">
    </label>
    <div style="display: block">
      <button (click)="onShowModel()">
        show model
      </button>
    </div>

    <div style="display: block">
      <button>
        set model from form
      </button>
    </div>
  </form>
</div>
<div>
  <p class="red"> from model : </p>
  <span class="red"> Model: {{myModel | json}}  {{nothing}}</span>

</div>

<div>
  <p class="blue"> from form, binding model : </p>
  <span class="blue"> Model: {{myForm.value | json}}</span>
</div>

我也分叉了您的示例：Example

如何使用formControlName进行“ twoDataBinding”？与ng模型类似

2 个答案: