[英]Angular2 patchValue in FormArray
正如我之前在一個問題中提出的那樣
我想創建一個嵌套表單,其中父對象與kid的formControlNames
所以我們假設我們有一個組件componentA.component.ts
@Component({
selector: 'common-a',
template: `
<div [formGroup]="parentForm">
<div class="form-group">
<label>Common A[1]</label>
<div >
<input type="text" formControlName="valueA1">
<small>Description 1</small>
</div>
<div class="form-group">
<label>Common A[2]</label>
<div >
<input type="text" formControlName="valueA2">
<small>Description 2</small>
</div>
</div>
`
})
export class ComponentA implements OnInit{
@Input() parentForm: FormGroup;
constructor(private _fb: FormBuilder) {
}
ngOnInit() {
this.parentForm.addControl("valueA1", new FormControl('', Validators.required));
this.parentForm.addControl("valueA2", new FormControl('', Validators.required));
}
}
和主要組成部分。
@Component({
selector: 'main',
template: `
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
<div>
<div *ngFor="let c of myForm.controls.componentA.controls; let i=index" class="form-group">
<common-a [parentForm]="c"></common-a>
</div>
<div>
<button type="submit" [disabled]="myForm.invalid">Register!</button>
<a class="button" (click)="add_component()">Add New</a>
<a class="button" (click)="delete_component()">Delete</a>
</div>
</div>
<pre>form value: <br>{{myForm.value | json}}</pre>
</form>
`
})
export class MainComponent implements OnInit{
@Input('group') public myForm: FormGroup;
add_component() {
const control = <FormArray>this.myForm.controls['componentA'];
control.push(this._fb.group({}));
}
delete_component() {
const control = <FormArray>this.myForm.controls['componentA'];
control.removeAt(this.myForm.length-1);
}
constructor(private _fb: FormBuilder) {
}
ngOnInit() {
this.myForm = this._fb.group({
componentA : this._fb.array([this._fb.group({})])
});
}
onSubmit(formValue) {
console.log(formValue);
}
}
我現在的問題是如何使用patchValue
從服務器端點獲取數據並填充表單數組的值,按需創建新的FormGroups
,始終與父服務器無關。
這種方法的問題,除了臭的架構,我用我自己的實現覆蓋patchValue方法並按需推送這些新組,因為在函數體內我知道有多少,但是孩子的OnInit不會在函數內調用,將值保留為空。
var self = this;
this.formArray.patchValue = (value: {[key: string]: any}, {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}) =>{
for(var i = 0; i < Object.keys(value).length; i++ ) {
self.add_new();
}
Object.keys(value).forEach(name => {
if (self.formArray.controls[name]) {
self.formArray.controls[name].patchValue(value[name], {onlySelf: true, emitEvent});
}
});
self.formArray.updateValueAndValidity({onlySelf, emitEvent});
}
我再次認為這是糟糕的設計。
static generate() {
return new FormGroup({
valueA1: new FormControl('', Validators.required),
valueA2: new FormControl('', Validators.required)
});
}
對於這類問題,你有什么清潔的解決方案嗎?
這也是基於我之前的問題的一個工作的plunkr
動態控制的替代解決方案。
1:注入ChangeDetectorRef
constructor(private _changeDetectorRef: ChangeDetectorRef) { }
2:覆蓋patchValue
this.control = new FormArray([]);
let patchValue = this.control.patchValue;
this.control.patchValue = (value: any, options?: Object) => {
for (let i = this.control.length; i < value.length; i++) {
// Push new item
}
this._changeDetectorRef.detectChanges();
patchValue.apply(this.control, [value, options]);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.