我按照這個視頻創建了一個回應式表單，以將資料輸入到我正在處理的 Angular 應用程式中。它在很大程度上完成了我想要的，但是，我添加了一個額外的控制元件（“setNumber”）以添加到反應表單陣列中，而不是通過“名稱”和“性別”的輸入欄位輸入一個值，要將其輸入到表單中，我希望該值根據組件的迭代自動填充到 getUserForm 組/可提交表單中。
理想情況下，我希望它顯示在姓名和性別旁邊，并放在表格中
我把代碼放在 StackBlitz here上，我只是將 setNumber(core>service>exerciseInput.service.ts) 作為自己的輸入欄位，它確實更新了要提交的表單......但由于某種原因我得到了我沒有進入 VSC 的 stackblitz 型別錯誤。但它是我正在使用的代碼，它在我的機器上運行良好。
應用視圖
無論如何，從stackblitz我相信我應該能夠在某處使用屬性系結將i作為值傳遞給組件（不僅僅是跨度字串插值中顯示的視圖），以便表單自動將i填充為userArray中的setNumber，但在過去的幾天里，我的嘗試沒有成功。
修復應該非常簡單，我在 input-array.component.html 中的以下代碼塊中忽略了它，但我無法讓它作業。
<div *ngFor="let u of userArray.controls; index as i">
<span>Set {{ i 1 }}</span>
<app-input [inputFormGroup]="$any(u)"></app-input>
<button (click)="removeUser(i)">Delete</button>
</div>
如果有任何幫助，我將不勝感激！
謝謝
uj5u.com熱心網友回復：
我正在嘗試解決您的問題，其中一個解決方案是FormArray通過管道修補您的問題，但我認為您需要實作ControlValueAccessor介面并在父子表單之間進行通信而不發生突變。關注IndexedFormPipe
Stackblitz
uj5u.com熱心網友回復：
在你的 stackblitz 中，型別錯誤是通過添加form1: FormGroupInputArrayComponent 來修復的（我也必須在其他地方添加型別）。此外，在匯入不存在的 scss 檔案方面存在錯誤。
無論如何，我可能誤解了您的問題，但是如果您只是想將 的值傳遞i 1給輸入組件并將該值設定為“setNumber”的 FormControl，您只需將 Input() 值添加到 InputComponent（I'我稱之為index）：
@Input() index: number;
然后在 InputArrayComponent 模板中我傳遞i 1給 inputComponent
<app-input [index]="i 1" [inputFormGroup]="$any(u)"></app-input>
在 inputArray 的 ngOninit() 中，我分配了值：
this.inputFormGroup.get('setNumber').setValue(this.index);
這是堆疊閃電戰：
https://stackblitz.com/edit/angular-ivy-2rwlwu?file=src/app/views/input/input.component.html
- - 編輯 - -
您的評論清楚地表明了洗掉用戶的問題 - 索引不會更新。要在洗掉用戶時自動更新索引，您需要在輸入更改時執行邏輯，這可以通過 set 函式完成：
@Input() set i(value: number) {
this.index = value;
this.inputFormGroup.get('setNumber')?.setValue(value);
};
這樣做的問題是它會覆寫setNumber用戶可能所做的任何更改。有很多方法可以解決它，但我的直覺告訴我，無論如何編輯這個值是沒有意義的。
因此，您可以簡單地將輸入替換為包含索引值的標簽。該值仍會出現在表單組中（以及提交的結果中），但用戶無法對其進行編輯。
我再次分叉了堆疊閃電戰，但有所不同：
https://stackblitz.com/edit/angular-ivy-hhhz9m?file=src/app/views/input/input.component.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/497741.html
標籤：javascript 有角度的 打字稿 形式 角反应形式