更新

Question

使用控件和选择框构建动态angular2表单时出现问题，例如plunker：

    <select class="form-control" ngControl="power">
      <option *ngFor="#p of powers" [value]="p">{{p}}</option>
    </select>

您可以选择英雄力量，控件将具有相同的值。但是，如果按Change Powers，则所选值将为null，但控制值仍为旧值。这是一个严重的问题，我认为这是一个很多错误的来源，当表单显示一件事，但实际上它会提交一些不同的东西，有没有办法更新控件的内容？有updateValue()，但您必须在所有这些情况下手动设置值。

在表单构建之后更新selectbox选项时也会出现类似的情况，它会在selectedbox中显示一个选定的值，而控件值将为null，有关如何处理此问题的任何想法吗？

Answer 1

在Angular 2 Final（RC5 +）中，有用于更新表单值的新API。 patchValue() API方法支持部分表单更新，我们只需要指定一些字段：

this.form.patchValue({id: selected.id})

还有setValue() API方法需要一个包含所有表单字段的对象。如果缺少某个字段，我们将收到错误。

Answer 2

更新

截至最新的angular2语法更新将如下

this.form.controls['power'].setValue('anthing here');

Answer 3

目前这是你唯一可以做的事情（如问题所述）

this.form.controls['power'].updateValue(null);

有一个未解决的问题，允许重置表单https://github.com/angular/angular/issues/4933

还有一个拉取请求，但也允许您为每个控件“手动”操作，但也允许重置原始状态，触摸状态...... https://github.com/angular/angular/pull/6679

Answer 4

[Angular 2 Stable]

这是使用NgModel的一种肮脏方式（并且不导入其他表单构建器或表单组模块）

$controller('MainController', {});

Answer 5

你可以尝试保持形式不变。当您需要重置它时，您只需重建它。这种方式可以确保它是最新的。您还可以将值保存在某处并将表单重置为这些值。假设您正在编辑某个项目，重置后您可以恢复原始值，而不仅仅是空表格...

export class TheForm {
  public form: ControlGroup;
  public controls = (value: any = {}) => ({
    'id': [value.id],
    'name': [value.name, Validators.required]
  });

  constructor() {
    let values = some_values_from_database || {};
    this.build(values);
  }

  build(value) {
    this.form = this._builder.group(this.controls(value));
  }

  submit() {
    console.log(this.form.value);
  }
}

我已经创建了使用@ngrx/store处理此类功能的基本表单，此处为the Gist。当我需要不同模型的表单时，我会扩展BaseForm并只定义controls和submit()方法，其余的都是继承的......

Answer 6

代码是：

(<FormControl>this.form.controls['power']).updateValue(data);

Angular2更新表单控件值

6 个答案:

更新