Question

我有一个表单来更新角度4中现有模型类的部分字段。

我需要在当前模型实例上设置setValue，最后将值重新更新。

问题是我只需要更新模型的某些部分，但角形式会返回错误

"Cannot find form control with name 'fieldname'"

表示我不想编辑的额外字段。

获得所需行为的最佳选择是什么？

我想为我不希望在表单中更新的字段添加隐藏的formControl，但是我们的一些模型非常大，而我们需要用户只编辑它们的一部分。

我必须在最后获得一个更新的模型，用于我们的模型的脏检查和一般更新（与具有多个重复的类相关代码相比，仅用于设置所有formControls的值并从提交时的formControls更新模型）

感谢。

UPDATE 只是为了澄清 - 我想要一个类似于此的行为：

--component.ts
model: Model = someModelWithData;

--component.html
<input type="checkbox" [(NgModel)]="model.FieldOne" />

用户更改FieldOne中的值后，模型仍然已满，但所有其他数据都已更改。

Answer 1

您可以使用patchValue方法而不是setValue更新表单的部分内容。

this.yourForm.patchValue({
     yourFieldToUpdate: yourValue
});

Answer 2

Angular的构建方式是将表单模型和数据模型分开。

来自文档：

为了与反应范式保持一致，该组件保留了数据模型的不变性，将其视为原始值的纯粹来源。该组件不是直接更新数据模型，而是提取用户更改并将其转发到外部组件或服务，后者对它们执行某些操作（例如保存它们）并将新数据模型返回到反映更新模型状态的组件。

但是如果要绑定到表单内的数据模型，可以设置ngModelOptions standalone to true

standalone：默认为false。如果将其设置为true，则ngModel将不会将其自身注册为其父表单，并且将表现为不在表单中。如果你有形式元控件，a.k.a。表单元素嵌套在控制表单显示的标签中，但不包含表单数据，这可能很方便。

Stack Blitz Example

在此示例中，模型有3个字段，其中2个可以在表单上进行编辑。

<强> model.ts

export class Model {
  fieldOne: string;
  fieldTwo: string;
  fieldThree: string;

  constructor(fieldOne: string, fieldTwo: string, fieldThree: string)
  {
    this.fieldOne = fieldOne;
    this.fieldTwo = fieldTwo;
    this.fieldThree = fieldThree;
  }
}

<强> app.component.ts

import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormGroup} from '@angular/forms';

import {Model} from './model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  private _form
  private _model: Model;

  get form(): FormGroup {
    return this._form;
  }

  get model(): Model {
    return this._model;
  }

  set model(model: Model) {
    this._model = model;
  }

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.model = this.newModel();
    this.createForm();
  }

  private newModel(): Model {
    return new Model('fieldOne', 'fieldTwo', 'fieldThree');
  }

  private createForm() {
    this._form = this.formBuilder.group({
    });
  }
}

<强> app.component.html

随着表单值的更改，实际的数据模型会更新，只有可编辑的字段才会通过表单进行更改。

<form [formGroup]="form">
  <div>
    <label for="fieldOne">Field One</label>
    <input
      id="fieldOne"
      type="text"
      [(ngModel)]="model.fieldOne"
      [ngModelOptions]="{ standalone: true }">
  </div>

  <div>
    <label for="fieldTwo">Field Two</label>
    <input
      id="fieldTwo"
      type="text"
      [(ngModel)]="model.fieldTwo"
      [ngModelOptions]="{ standalone: true }">
  </div>
</form>

<h3>Model</h3>
<pre>{{ model | json }}</pre>

Answer 3

如何将两种方式绑定到只有你想要更新其字段（在Model中）的控件，并使用angular double curly表达式将值设置为其余

例如

<input type="checkbox" [(NgModel)]="model.FieldOne">
<input type="text" name="fieldone" [(NgModel)]="model.FieldOne">
<input type="text" name="fieldtwo"[(NgModel)]="model.FieldTwo">
<input type="text" name="ignore1" value ="{{model.Ignore1}}">
<input type="hidden" name="ignore2" value ="{{model.Ignore2}}">

Angular4表单 - formGroup setValue到具有额外字段的模型

3 个答案: