我正在努力解決一個問題，我找不到一個簡單的解決方案。這是 Angular 中的反應形式的情況。
我需要創建一個父組件，我可以通過單擊按鈕添加一些列。每列應該有它自己的 2 個控制元件的實體：名稱和姓氏。
我創建了一個子組件，我在其中傳遞了一個 FormGroup，其中我有 2 個用于姓名和姓氏的 FormControl。在這種情況下，我可以在我的子組件中表示這 2 個 FormControl。
我想在我的父組件中訂閱所有這些表單（如果只添加了 1 列，則訂閱 1 個表單），并從所有這些表單中獲取所有資料（還要檢查所有表單是否有效）。
對于我當前的問題，看起來我需要為每個傳遞給子組件的 FormGroup 回圈，并訂閱它。有沒有辦法簡單地訂閱表單作為“整體”，不管我們有多少表單？有沒有更好的解決方案？
提前致謝。
這是添加新列后如何創建新 FormGroup 的代碼：
addNewColumn() {
const group = new FormGroup({
name: new FormControl('', [Validators.required]),
surname: new FormControl('', [Validators.required])
});
this.columns.push({
formGroup: group
});
}
在父組件 html 中，我在 *ngFor 中傳遞這些列：
<div *ngFor="let column of columns;>
<child-component-column [columnForm]="column"></child-component-column>
</div>
在子組件中，我使用這個 columnForm 并表示如下輸入：
<div [formGroup]="columnForm.formGroup">
<ng-container>
<mat-form-field>
<input id="column-name"
matInput
type="text"
maxLengthValue="20"
formControlName="name" />
</mat-form-field>
<mat-form-field class="m-t-10">
<input id="column-surname"
matInput
formControlName="surname" />
</mat-form-field>
</ng-container>
</div>
uj5u.com熱心網友回復：
您想使用FormArray。您可以這樣做，例如如下：
在父組件 TS 中：
const form = new FormGroup({
people: new FormArray<any>([])
});
get peopleArray(): FormArray<any> {
return this.form.controls.people as FormArray<any>;
}
添加新人：
addPerson(): void {
const group = new FormGroup({
name: new FormControl('', [Validators.required]),
surname: new FormControl('', [Validators.required])
});
this.peopleArray.push(group);
}
在父組件 HTML 中：
<div [formGroup]="form">
<div formArrayName="people" *ngFor="let person of peopleArray.controls">
<child-component-column [columnForm]="person"></child-component-column>
</div>
</div>
如果您這樣做，您可以簡單地從父組件訪問表單有效狀態/表單值。
// To get value
const formValue = this.form.value;
const people = formValue.people;
// To see if form is valid (including all people)
const valid = this.form.valid;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/526099.html
標籤：有角度的角反应形式