我正確使用FormArray嗎？

所以我有沒有錯誤編譯代碼，但是當使用我給出錯誤...我正確使用FormArray嗎？

我的表單組件：

export class OrderHeaderComponent implements OnInit { 
    orderForm: FormGroup; 
    orderLines: FormArray; 

    ngOnInit() { 
     // build the form model 
     this.orderLines = this.fb.array([]) 
     this.orderForm = this.fb.group({ 

      orderHeadForm: this.fb.group({ // create nested formgroup to pass to child 
       selectTypeahead: ['', 
            Validators.required], 
       ohReference: ['', 
            Validators.required], 
       }), 

      orderLines: this.orderLines, 

     }) 

    } 

    someFunction(){ 
     this.orderLines.push(this.fb.group({ 
        ['newInputName']: ['', 
            Validators.required], 
        })); 
    } 
}

現在，這是一個父組件，即通過形式各種各樣的孩子（這工作減去我目前正在工作的formArray部分）。每個孩子看起來是這樣的： parent_template：

<form [formGroup]="orderForm" (ngSubmit)="orderFormSubmit()"> 
    <childTemplate [orderHeadForm]="orderForm.controls.orderHeadForm"> 
    </childTemplatet> 
</form>

子模板：

<div class="form-group" [formGroup]="orderHeadForm"> 
     <label for="oh-custaccount">Customer Account #</label> 

    <input class="form-control" type="text" 
    formControlName="selectTypeahead" 
    (focusout)=lookupCustomerAccountReactive() /> 

    <p *ngIf="orderHeadForm.controls.selectTypeahead.errors?.required" 
    style="color:red;">Number required!</p> 
</div>

子組件：

export class CustomerSelect implements OnInit { 

    @Input() orderHeadForm: FormGroup; 

.... 
}

現在，在這一點上，我甚至不試圖使新從formArray的形式輸入，我只是想讓他們創建沒有錯誤，所以我可以在之後建立模板。但目前我的應用程序，只要我打電話someFunction崩潰（）到一個新的項目添加到orderLines陣列：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '{ 
"orderHeadForm": { 
    "selectTypeahead": "", 
    "ohReference": "" 
}, 
"orderLines": [] 
}'. Current value: '{ 
"orderHeadForm": { 
    "selectTypeahead": "", 
    "ohReference": "" 
}, 
"orderLines": [ 
    { 
    "newInputName": "" 
    } 
] 
}'

現在，我已經看到了這個線程：

how to access the index value of formarray of angular, when nested formControls are placed in a separate component?

但我如果我有30個子組件都需要這個，也許我在做我的表單設置/構建時出了問題。我做錯了什麼/錯誤地使用表單數組？由於沒有提及文檔中提到的修復，我懷疑我的用例是獨特的。

來源

2017-05-24 crooksey

@ AJT_82這是「我是否正確使用它？」那扔了我，並且錯誤與JSON一起的事實。縮回。在作出決定之前，我需要更詳細地閱讀這些內容。咖啡... –

啊，刪除我的答案，因爲我發現它爲什麼拋出一個錯誤。你的代碼有錯誤，你是否檢查過它，它們是否在你的實際代碼中，例如'['newInputName]'缺少'''。我不明白你爲什麼會得到這個錯誤。但是嘗試手動觸發更改檢測，就像在您已鏈接的答案中一樣。在'orderLines'中添加新的表單組後執行此操作。如果你可以嘗試在重擊者身上重新創建問題，最好是tho :) – Alex

@R。理查茲哈哈，不用擔心，發生在我們身上，至少對我來說很多次：P – Alex

由於某種原因，當您運行功能someFunction時，出現更改檢測問題。您想知道是否需要爲每個孩子添加手動更改檢測，並根據您分享的鏈接進行檢測。但在這種情況下這不是必要的。爲什麼？

reasong是，設置@Input時不會引發錯誤。這工作正常，並沒有拋出錯誤。當您在父項中調用函數someFunction時會發生錯誤，這向我們展示了檢測到更改的問題就在這一點。

由線後觸發手動改變檢測：

this.orderLines.push(this.fb.group({ 
    ['newInputName']: ['', Validators.required], 
}));

因此應該足夠並且不需要觸發每個孩子變化檢測。所以你的代碼應該是這樣的：

import {ChangeDetectorRef} from '@angular/core' 

constructor(private ref: ChangeDetectorRef) { } 

someFunction(){ 
    this.orderLines.push(this.fb.group({ 
    ['newInputName']: ['', Validators.required], 
    })); 
    this.ref.detectChanges(); 
}

來源

2017-05-24 12:44:58 Alex

我正確使用FormArray嗎？

回答

相關問題