Angular 10 Angular material checkbox array not passing values

Question

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>

Marcell Kiss · Accepted Answer · 2020-07-24 06:29:50Z

1

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.

edited Jul 24, 2020 at 6:29

answered Jul 24, 2020 at 6:16

Marcell Kiss

5764 silver badges11 bronze badges

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

4 Comments

Math Over a year ago

I need array of values, because I have to apply other logic's in backend

Marcell Kiss Over a year ago

I extended my answer with a pretty useful link

Math Over a year ago

I updated my codes like the example (let wdItems of holidayForm.SelectedWeekDays) i get error Property 'SelectedWeekDays' does not exist on type 'FormGroup'

chitgoks Over a year ago

I think he meant instead of true/false as values, he is looking to using at other custom values. Came across this post because i do not want true/false as values but from certain arrays. [value] did not work.

Collectives™ on Stack Overflow

Angular 10 Angular material checkbox array not passing values

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related