設置嵌套控件在FormArray與FormBuilder

下面是一個example：設置嵌套控件在FormArray與FormBuilder

constructor(public fb: FormBuilder) { 
    this.form = this.fb.group({ 
     foobars: this.fb.array([fb.group({ foo: null, bar: null })]), 
     baz: null 
    }); 

    const formValues = { 
     foobars: [ 
     { foo: 1, bar: 'one'} 
     { foo: 2, bar: 'two'} 
     ], 
     baz: 'baz' 
    }; 

    this.form.reset(formValues); 
    } 

    addFoobar() { 
    this.form.controls.foobars.push(this.fb.group({ foo: null, bar: null })) 
    }

和模板：

<div> 
    <div *ngFor="let foobar of form.controls.foobars.controls"> 
    foo: <input [formControl]="foobar.controls.foo" type="number"> 
    bar: <input [formControl]="foobar.controls.bar"> 
    </div> 
    baz: {{ form.controls.baz.value }} 
    <button (click)="addFoobar()">Add foobar</button> 
</div>

形式應該具有foo/bar控制對變量量。這些數據作爲foobars數組存儲在數據庫中，並作爲普通對象檢索（formValues在此示例中是靜態的，但事實上並非如此）。

問題是，reset不會在foobars窗體數組中自動創建嵌套控件，而我期望它會。

如何在此處設置表格值與reset？手動創建foobar項目爲fb.group({ foo: ..., bar: ... })])添加/設置嵌套控件的唯一正確方法？

來源

2017-08-30 estus

因爲您正在設置構造函數中的值，所以不需要重置標記太多，您不能使用setValue（）方法嗎？ – Vega

您不能使用setValue來設置FormArray，no。 – DeborahK

這很有趣：https://github.com/angular/angular/issues/10960 – DeborahK

你可以試着重新調整你的構造函數，如：

constructor(public fb: FormBuilder) { 
    this.form = this.fb.group({ 
    foobars: this.fb.array([]), 
    baz: null 
    }); 

    this.addFoobar =() => { 
    this.form.controls.foobars.push(this.fb.group({ foo: null, bar: null })) 
    } 

    const formValues = { 
    foobars: [ 
     { foo: 1, bar: 'one'} 
     { foo: 2, bar: 'two'} 
    ], 
    baz: 'baz' 
    }; 
    formValues.foobars.map(this.addFoobar); 

    this.form.reset(formValues); 
}

foobars由FormBuilder與空數組
foobars形式排列充滿了初始條目使用formValues.foobars.map()函數執行創建形式排列addFoobar()每次迭代。
形式是通過執行this.form.reset(formValues)

@DeborahK更新，我不同意你關於

您不能使用的setValue設置FormArray

這裏是這個函數： https://github.com/angular/angular/blob/c59c390cdcd825cca67a422bc8738f7cd9ad42c5/packages/forms/src/model.ts#L1221。

在更新plunker我添加的按鈕時，恰好有3數組項已啓用「的形式陣列設置值」，點擊該按鈕將更新形式陣列setValue()功能：

setFaValue() { 
    this.form.get('foobars').setValue([ 
    { foo: 10, bar: 'one0'}, 
    { foo: 20, bar: 'two0'}, 
    { foo: 30, bar: 'three0'} 
    ]); 
}

更新plunker： http://plnkr.co/edit/XALYC8hUxkY0hIJrGLHx?p=preview

來源

2017-09-01 23:15:36 Andriy

設置嵌套控件在FormArray與FormBuilder

回答

相關問題