我在构建带有控件和选择框的动态 angular2 表单时遇到问题， 例如这个plunker:
<select class="form-control" ngControl="power">
<option *ngFor="#p of powers" [value]="p">{{p}}</option>
</select>
你可以选择一个英雄的力量，并且控制将具有相同的价值。但是如果你按下Change Powers，选择的值将会是空的，但是控制值仍然是旧的值。我认为这是一个严重的问题，因为当表单显示一件事但实际上它会提交不同的内容时，这是很多错误的来源，有没有办法更新控件的内容？有updateValue()，但在所有这些情况下您都必须手动设置值。
还有一个类似的情况，当你在表单构建后更新选择框选项时，它会在选择框中显示一个选中的值，而控件的值会为空，请问如何处理这个问题？
【问题讨论】：
在 Angular 2 Final (RC5+) 中，有用于更新表单值的新 API。 patchValue() API 方法支持部分表单更新，这里我们只需要指定部分字段：
this.form.patchValue({id: selected.id})
还有setValue() API 方法需要一个包含所有表单字段的对象。如果缺少某个字段，我们将收到错误消息。
【讨论】：
updateValue（来自第一个答案）已被弃用，取而代之的是setValue
截至 angular2 语法的最新更新将是这样的
this.form.controls['power'].setValue('anthing here');
【讨论】：
form 或 formControl 对象？
目前这是您唯一可以做的事情（如问题中所述）
this.form.controls['power'].updateValue(null);
有一个未解决的问题允许重置表单https://github.com/angular/angular/issues/4933
还有一个拉取请求，但它也允许您“手动”为每个控件设置它，还允许重置原始、触摸等状态...https://github.com/angular/angular/pull/6679
【讨论】：
updateValue() 的问题是每次在表单中我都有动态元素我应该用它更新每个值？表单重置是另一回事，我需要复杂表单中的所有值都是最新的，而不是重置它:)
change 事件以更新表单模型。
[Angular 2 稳定版]
这是一种只使用 NgModel 的肮脏方式（并且没有导入其他表单构建器或表单组模块）
//
// set form field, "foo" value to "bar"
//
//
// view
//
<form #formRef="ngForm">
<input name="foo" [(ngModel)]="foo"></input>
</form>
//
// controller
//
class {
@ViewChild('formRef') form: NgModel;
ngAfterViewInit() {
setTimeout(() => {
this.form['controls']['foo'].setValue('bar');
});
}
}
【讨论】：
您可以尝试保持表单不可变。当你需要重置它时，你只需重建它。这样可以确保它是最新的。您还可以将值保存在某处并将表单重置为这些值。假设您正在编辑一个项目，当您重置时，您可以恢复为原始值，而不仅仅是一个空表单...
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() 方法，其余的都是继承...
【讨论】：
代码是：
(<FormControl>this.form.controls['power']).updateValue(data);
【讨论】：