[英]FormArray in Angular Reactive Form not resetting on form submit
[英]Angular reactive form - checkboxes - Initialize formArray with exisitng array
我有一個從服務器獲取的 lkBoardTypeList 列表的動態數組。 我想在初始化時推送該數組以形成數組,基本上我想根據數組中的板名或 id 顯示復選框。 我知道如何在反應式 forms 中推送一個空數組。但是如何使用現有數組進行初始化。實際上它是一個更新/編輯組件
export class BoardTypeList{
id number;
descr string;
}
零件:
lkBoardTypeList: LkBoardType[] = [];
SelectedLkBoardTypeList: LkBoardType[] = [];
this.boardDashboardForm = this.formBuilder.group({
id: new FormControl(this.boardObj.id, Validators.required),
location: new FormControl(this.boardObj.location),
boardType: new FormArray([])
});
this.addCheckBoxes();
..//..//
addCheckBoxes(){
this.lkBoardTypeList.forEach(() => this.boardTypeFormArray.push(new FormControl(false)));
}
get boardTypeFormArray(){
return this.boardDashboardForm.controls.boardType as FormArray;
}
loadSelected(event){
this.boardService.getBoardTypeById(event.value).subscribe( posts =>{
this.data = posts;
console.log('getBoardTypeById',this.data);
},
error => {
console.log('getBoardTypeById - error',error);
this._errorService.handleError(error);
},
() => {
this.SelectedLkBoardTypeList = this.data.boardTypes;
for (let i = 0; i < this.lkBoardTypeList.length; i++) {
..///.. what code goes here
}
});
}
並在 HTML
<div class="row">
<div class="col-sm-2">
<p-dropdown [options]="boardArray" formControlName="id" (onChange)="loadSelected($event)" placeholder=" Select "></p-dropdown>
</div>
</div>
<div class="form-group" >
<div formArrayName="boardType" *ngFor="let c of boardTypeFormArray.controls; let i = index">
<input class="col-sm-1" type="checkbox" [formGroupName]="i"/>
<span class="col-sm-5" >{{lkBoardTypeList[i].descr}}</span>
</div>
</div>
現在,當我檢查元素時,我看到 formArrayName="boardType" 和 checkbox 元素如下:
<input class="col-sm-1 ng-untouched ng-pristine ng-valid" type="checkbox" ng-reflect-name="0">
<input class="col-sm-1 ng-untouched ng-pristine ng-valid" type="checkbox" ng-reflect-name="1">
<input class="col-sm-1 ng-untouched ng-pristine ng-valid" type="checkbox" ng-reflect-name="2">
我猜 ng-reflect-name="0" 只不過是 'i' 的值。 什么試圖從 lkBoardTypeList 中設置 id 為 10、20、30 的數組的值。
另外請讓我知道如何設置復選框中選中的值。 SelectedLkBoardTypeList - 例如,整個列表具有值 (10,20,30)。 selectedList 僅包含 10 個,必須對其進行檢查。
首先,你應該使用[formControlName]="i"
而不是[formGroupName]="i"
添加ng-reflect-${name}
屬性用於調試目的,並顯示組件/指令在其 class 中聲明的輸入綁定。
FormControlName
指令聲明
@Input('formControlName') name!: string|number|null;
所以,你是對的: ng-reflect-name="0"
描述了你在formControlName
輸入中傳遞的值。
如果您想使用SelectedLkBoardTypeList
預填充 FormArray ,那么您只需檢查SelectedLkBoardTypeList
中是否存在特定項目。 假設您有:
SelectedLkBoardTypeList: LkBoardType[] = [
{
id: 10,
descr: 'Type 1'
}
];
那么你的addCheckBoxes
方法應該如下:
addCheckBoxes() {
this.lkBoardTypeList.forEach((type) => {
const selected = this.SelectedLkBoardTypeList.some(x => x.id === type.id);
this.boardTypeFormArray.push(new FormControl(selected))
});
}
最后,如果您想在后期執行期間獲取選定的項目,您可以將 FormArray 中的 map 選定值添加到原始數組中:
save() {
const model = this.boardDashboardForm.value;
const selectedTypes = model.boardType.filter(Boolean).map((_, i) => this.lkBoardTypeList[i]);
console.log(selectedTypes);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.