CODEWITHSUNDEEP
angularangular-material
Math
Math

Reputation: 429

Angular 10 Angular material checkbox array not passing values

My application is Angular 10 and my forms are Reactive I implemented checkbox array in my application it does not pass the values. when I check the checkboxes and submit my form it does not pass values of checked days.

my component.ts

 this.holidayForm= this._formBuilder.group({
    RepeatTypeID: ['', null],
    SelectedWeekDays: new FormArray([]),
  });

my component html

  <div  *ngFor="let wdItems of WeekDays; let i=index">
            <mat-checkbox formArrayName="SelectedWeekDays" [value]="wdItems.Weekdayid" >{{wdItems.Weekdayname}}</mat-checkbox>
          </div>

Upvotes: 0

Views: 912

Answers (1)

Marcell Kiss
Marcell Kiss

Reputation: 556

Based on this article:

Create a FormArray like this:

this.fg = new FormGroup({
   optionControls: new FormArray([
      new FormControl(true),
      new FormControl(false),
   ])
})

Render the options, based on these controls:

  <div *ngFor=”let optionControl of fg.optionControls; let i=index”>
   <input type=”checkbox” [formControl]=”optionControl”/> {{  myOriginalArray[i].someProperty }}
  </div>

Now fg.optionControls.value is an array of boolean values. eg.: [true, false]. If this is not enough, you can continue with converting this datastructure into a format which serves your needs.

Good luck, I hope I could help.

Upvotes: 1

Related Questions