[英]Angular2 update form control value
我在使用控件和选择框构建动态 angular2 表单时遇到问题,例如这个plunker :
<select class="form-control" ngControl="power">
<option *ngFor="#p of powers" [value]="p">{{p}}</option>
</select>
您可以选择英雄的力量,并且控制将具有相同的值。 但是,如果您按Change Powers
,则所选值将为空,但控制值仍然是旧值。 我认为这是一个严重的问题,因为当表单显示一件事但实际上它会提交不同的内容时,这是许多错误的来源,有什么方法可以更新控件的内容吗? 有updateValue()
但您必须在所有这些情况下手动设置该值。
还有一个类似的情况,当你在表单构建后更新selectbox选项时,它会在selectedbox中显示一个选定的值,而控件值为null,请问如何处理?
在 Angular 2 Final (RC5+) 中有用于更新表单值的新 API。 patchValue()
API 方法支持部分表单更新,我们只需要指定部分字段:
this.form.patchValue({id: selected.id})
还有setValue()
API 方法需要一个包含所有表单字段的对象。 如果缺少字段,我们将收到错误消息。
截至 angular2 语法的最新更新将是这样的
this.form.controls['power'].setValue('anthing here');
目前这是您唯一可以做的事情(如问题中所述)
this.form.controls['power'].updateValue(null);
有一个开放问题允许重置表单https://github.com/angular/angular/issues/4933
还有一个拉取请求,但它也允许您为每个控件“手动”设置它,但也允许重置状态,如原始、触摸、... https://github.com/angular/angular/pull/6679
[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
创建了处理这种功能的基本表单,这里是 Gist 。 当我需要不同模型的表单时,我将扩展BaseForm
并只定义controls
和submit()
方法,其余部分继承...
代码是:
(<FormControl>this.form.controls['power']).updateValue(data);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.