0

In an Angular 7 SPA, I'm tasked with giving the user a list of checkboxes, which will bind to UUIDs.

<ng-container formArrayName="mappedSegmentUuids">
  <div *ngFor="let seg of allsegments; let i = index">
    <mat-checkbox [formControlName]="i" [value]="seg.uuid">{{seg.mydescription}}</mat-checkbox>
  </div>
</ng-container>

While I can set the 'value' on the mat-checkbox, this will revert to true/false as soon as the user interacts with the checkbox. How can I bind an arbitrary value to the "checked" state of a mat-checkbox?

Edit Added https://stackblitz.com/edit/angular-6pzu2e to illustrate issue.

Simon
  • 2,994
  • 3
  • 28
  • 37
  • I do not believe you can override [value] like that on a checkbox. You will need to do some filtering to find out which items have been selected and then access their `uuid`. Here is an excellent read outlining a similar implementation with Angular 7 --> https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular – Nathan Beck Feb 07 '19 at 18:28
  • My understanding is that the CheckboxControlValueAccessor should update the 'checked' state of the element instead of value. When toggling the checkbox (stackblitz), the value attribute remains, yet the FormGroup value goes to true/false – Simon Feb 08 '19 at 08:39
  • You are correct. This might make for an interesting read https://stackoverflow.com/questions/40927167/angular-reactiveforms-producing-an-array-of-checkbox-values – Nathan Beck Feb 08 '19 at 16:30

0 Answers0