时间戳

首页 > 解决方案 > 角反应形式 - 复选框 - 使用现有数组初始化 formArray

javascript - 角反应形式 - 复选框 - 使用现有数组初始化 formArray

问题描述

我有一个从服务器获取的 lkBoardTypeList 列表的动态数组。我想在初始化时推送该数组以形成数组，基本上我想根据数组中的板名或 id 显示复选框。我知道如何以反应形式推送一个空数组。但是如何使用现有数组进行初始化。实际上它是一个更新/编辑组件

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 个，必须对其进行检查。

标签： javascriptangularformsangular-reactive-formsangular2-forms

解决方案

首先，你应该使用[formControlName]="i"而不是[formGroupName]="i"

ng-reflect-${name}添加属性用于调试目的，并显示组件/指令在其类中声明的输入绑定。

FormControlName指令声明

@Input('formControlName') name!: string|number|null;

所以，你是对的：ng-reflect-name="0"描述你在formControlName输入中传递的值。

如果你想预先填充 FormArray ，SelectedLkBoardTypeList那么你可以检查特定项目是否存在于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 中的选定值映射到原始数组：

save() {
  const model = this.boardDashboardForm.value;

  const selectedTypes = model.boardType.filter(Boolean).map((_, i) => this.lkBoardTypeList[i]);
  console.log(selectedTypes);
}

Ng 运行示例

推荐阅读