[英]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.