Angular2 Formbuilder - 引用FormArray元素

Question

我們有一個表單需要一個服務響應，以便用正確的字段名填充一個表（我們的FormArray）。鑑於正確的表單字段名稱，我們試圖通過對另一個數據庫的另一個服務調用來填充某些參數的字段。

一個簡單的例子：

ngOnInit() { 
    this.myForm = this._fb.group({ 
    name: [''], 
    myArray: this._fb.array([]) 
    }), 
    initArray(); 
} 
private initArray(){ 
    this.arrayValsService.getValues.subscribe(
    response => { 
        for (item of response) { 
        let arrayItemGroup = this.createItemGroup(item.code, item.value); 
        const control = <FormArray>this.myForm.controls['myArray']; 
        control.push(arrayItemGroup); 
        } 
       }, 
    err => {console.error(err);} 
    }; 
} 
private createItemGroup(code: string, value: string) { 
    return this._fb_group({ 
    selected: [false], 
    itemCode: [code], 
    itemValue: [value], 
    otherVal1: [''],  
    otherVal2: [''] 
    }); 
} 

private setArray() { 
    if(this.key !== undefined) { 
    this.dataService.getData(this.key).subscribe(
     response => { 
     this.myForm.patchValue(response); 
     for (let resItem of response.itemsSet) { 
      for (let formItem of <FormArray>this.myForm.controls['myArray']) { 
      if (formItem.controls.itemCode === resItem.code) { // <== ISSUE HERE 
       formItem.patchValue(response.itemsSet.resItem); 
       formItem.controls.selected.setValue(true); 
      } 
      } 
     } 
     err => {console.error(err);} 
    ); 
    } 
} 

我在我們「不能讀取屬性‘控制檯接收到錯誤控制’的未定義的，」以上發生在標記行。我需要引用數組中的各個表單控件組，以便相應地更新它們的值。代替使用嵌套for循環的，我還試圖用array.find以便檢查該陣列元件組中的特定控制：

const control = <FormArray>(this.myForm.controls['myArray']) 
    .find(item => myArray.controls.item.itemCode === resItem.code) 

這也不工作;遇到與作爲未定義屬性的控件相同的問題。底線是，我需要一種方法來引用formArray的子​​元素和每個這些子元素的控件。

以下方法適用於通過formArray.controls陣列對象迭代，但仍產生了打字稿編譯錯誤：

for (let resItem of response.itemsSet) { 
    const control = this.myForm.controls['myArray'].controls 
    .find((item:any) => item.value.itemCode === resItem.code); 
    if(control) {control.controls.selected.setValue(true); // ...other value updates 

的control是一個數組對象，所以.find（）是工作在這裏。在['myArray'].controls的子類型（FormGroup類型）中，還有另一個數組對象child.value，它具有我正在比較服務響應的代碼。在功能上，這是做預期的工作;但是，我仍然收到一個錯誤：'錯誤TS2329：屬性'控件'不存在於'AbstractControl'類型'。'

以供將來參考決賽編輯：

類型轉換的FormArray本身和我「發現」的FormGroup是有效地去除初始打字稿錯誤。然而，在這樣做的時候，我正在更新的窗體控件開始在類型爲'AbstractControl'的錯誤上拋出相同的「屬性」控件。我根據this question更改了引用特定控件的格式。

最終結果：

for (let resItem of response.itemsSet) { 
     const control = (<FormGroup>((<FormArray>(this.myForm.controls['myArray'])).controls 
     .find((item:any) => item.value.itemCode === resItem.code))); 
     if(control) {control.controls['selected']setValue(true); // ...other value updates 

關鍵要點：類型轉換FormGroups，FormArrays;使用['control']格式引用明確命名的控件。

Answer 1

您所擁有的formItem變量不是FormControl。該解決方案的話，是可以直接訪問的FormArray控件數組並重復：

for (let formItem of <FormArray>this.myForm.controls['myArray'].controls) { 
    if ((<FormGroup>formItem).controls['itemCode'] === resItem.code) { 
      <...> 
      (<FormGroup>formItem).controls['selected'].setValue(true); 
    } 
} 

其他方式應該有一堆「未定義」彈出，如果你登錄他們。

這裏有一個plunker展示這種細微之處：http://plnkr.co/edit/JRbrPR2g2Kl3z6VJV5jQ?p=preview

爲了您的打字稿的錯誤，如果你知道比編譯器那麼你將不得不投好。

這對於查找版本：

(<FormGroup>control).controls['selected'].setValue(true);