1

我正在使用表单设置模型，但是在使用表单设置“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 分享，谢谢：

也是为了避免图片中出现这个警报

4

2 回答 2

3

如果你想使用 2-way binding，你应该使用模板驱动的表单。它允许您使用ngModel创建双向数据绑定来读取和写入输入控制值。

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

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

需要注意的一件事是，您不应该将 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);
于 2019-04-17T05:35:03.480 回答
0

您应该停止将 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>

我还分叉了您的示例：示例

于 2019-04-17T08:55:22.443 回答