Angular reactive form - checkboxes - Initialize formArray with exisitng array

Question

I have an dynamic array of lkBoardTypeList list fetched from server. I want to push that array to form array on initialization, basically i want to show checkboxes based on Board name or id in array. I know how to push an empty array in reactive forms.but how to initialize with an existing array.Actually its an update/edit Component

export class BoardTypeList{
id number;
descr string;
}

component :

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
            }
            }); 
}

And in the 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>

RightNow when I inspect element I see formArrayName="boardType" and checkbox element as follows:

<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">

I am guessing the ng-reflect-name="0" is nothing but value of 'i'. What am trying to set value of the array with id from lkBoardTypeList which is 10,20,30.

Also please let me know how to set the values for checked in the checkboxes. SelectedLkBoardTypeList - say for example the entire list has values (10,20,30). selectedList contains only 10 and it has to be checked.

This is how it has to work. When the page loads up initially all the checkboxes should be unchecked. But I want ng-reflect-name="10", ng-reflect-name="20",ng-reflect-name="30" which maps the id from lkBoardTypeList. Next When the dropDown in the page changes I get the selectedLkBoardTypeList. Now i check to see what should be checked and unchecked. — Geek
– Geek, Commented Aug 3, 2020 at 12:52

yurzui · Accepted Answer · 2020-08-03 08:50:21Z

2

First of all, you should use [formControlName]="i" instead of [formGroupName]="i"

ng-reflect-${name} attribute is added for debugging purposes and shows the input bindings that a component/directive has declared in its class.

FormControlName directive declares

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

So, you're right: ng-reflect-name="0" describes value you're passing in formControlName input.

If you want to prepopulate FormArray with SelectedLkBoardTypeList then you can just check if specific item exists in SelectedLkBoardTypeList. Let's say you have:

SelectedLkBoardTypeList: LkBoardType[] = [
  {
    id: 10,
    descr: 'Type 1'
  }
];

then your addCheckBoxes method should be as follows:

addCheckBoxes() {
  this.lkBoardTypeList.forEach((type) => {
    const selected = this.SelectedLkBoardTypeList.some(x => x.id === type.id);
    this.boardTypeFormArray.push(new FormControl(selected))
  });
}

Finally, if you want to get selected items during post execution you can map selected values in FormArray to your original array:

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

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

Ng-run Example

answered Aug 3, 2020 at 8:50

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Geek Over a year ago

thank you. One question? When the page loads up initially the checkboxes should all be unchecked but the formCOntrolName should have value of 10,20,30 what change does that require in the adCheckBoxes method? The selectedLkBoardTypeList is only when I change abother dropdown element in the html file.I changed formGroupName to formControlName.

yurzui Over a year ago

If they are all unchecked then all values should be false

Geek Over a year ago

my addcheckBoxes will initially have false addCheckBoxes(){ this.lkBoardTypeList.forEach(() => this.boardTypeFormArray.push(new FormControl(false))); } So ng-reflect-name="0", I want this to hold ng-reflect-name="10" or 20, 30 with unchecked and when I change the dropDown I will see which one should be selected and have the selected code on it.

yurzui Over a year ago

If SelectedLkBoardTypeList is an array of LkBoardType then it should be like this

this.boardTypeFormArray.patchValue(this.lkBoardTypeList.map(item => selectedLkBoardTypeList.some(type => type.id === item.id))

)

yurzui Over a year ago

You can check it here ng-run.com/edit/1k3nE4GNbl7Rizj6Vosa

|

Collectives™ on Stack Overflow

Angular reactive form - checkboxes - Initialize formArray with exisitng array

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related