dimanche 2 août 2020

Angular : Array Of CheckBoxes - dynmaically setting to checked/unchecked

I have an array of CheckBox defined as follows:

Component.ts

export class dashboardComponent  {

    get boardTypeFormArray(){ 
        return this.boardDashboardForm.controls.boardType as FormArray;
    }

    addCheckBoxes(){
    this.lkBoardTypeList.forEach(() => this.boardTypeFormArray.push(new FormControl(false)));
    }

    constructor(){
        this.boardDashboardForm = new FormGroup({});
        this.boardDashboardForm = this.formBuilder.group({ 
            boardType: new FormArray([])
         });   
         this.addCheckBoxes();
    }
    
    saveBoard(obj){
        const selectedBoardType = this.boardDashboardForm.value.boardType
        .map((checked, i) => checked ? this.lkBoardTypeList[i].id : null).filter(v => v !== null);
        }
}

HTML code looks like

<div class="form-group" >
<div formArrayName="boardType" *ngFor="let c of boardTypeFormArray.controls; let i = index">
    <input class="col-sm-1" type="checkbox" [formControlName]="i"/>
    <span class="col-sm-5" ></span>
</div>
</div>

this works perfectly fine and when checked saveBoard() gives me checked items. I now have a requirement to check/uncheck the checkboxes based on dropdown values. So i have added this code to (onChange) of dropdown as follows:

loadCheckBoxes(event){
            
        this.bService.getbTypeById(event.value).subscribe( posts =>{
            this.data = posts; 
            },
            error => { 
            this._errorService.handleError(error); 
            }, 
            () => {   
            this.boardTypeByIdList = this.data.boardTypes;
            for (let i = 0; i < this.lkBoardTypeList.length; i++) { 
            onsole.log(this.lkBoardTypeList[i].id);
            this.boardTypeFormArray.push(new FormControl(true));
            }
         
        }); 
}

This is adding me another set of checkboxes and checks the corresponding box. I know I shouldnt do this push

this.boardTypeFormArray.push(new FormControl(true));

But want to know how to do this check/uncheck. Can someone help with the script please? thank you.




Aucun commentaire:

Enregistrer un commentaire