如何以 Angular Reactive 形式获取复选框值

Question

I am learning Angular now. I am making a Reactive Form which has a group of checkboxes. I have created those checkboxes using Angular Material. So far after googling for the whole day I wasn't able to come up with a solution which tells me to get the checkbox checked value in FormGroup in TS file. I am attaching the code herewith.

app.component.html

<form [formGroup]="formdata">
   <label>Vehicles</label><br>
   <mat-radio-group>
      <mat-checkbox *ngFor="let v of Vehicles" formControlName="vehicles" [value]="v.value">{{ v.option }}</mat-checkbox>
   </mat-radio-group>
</form>
{{ formdata.value | json }}

app.component.ts

import { FormBuilder } from '@angular/forms';

export interface model
{
  value: string; //Store value for the option
  option: string; //Stores option to be displayed
}

export class FormComponent implements OnInit{
    Vehicles: model[] = [{value: '2 wheelers', option: '2 wheelers'}, {value: '4 wheelers', option: '4 wheelers'}];

    constructor(private fb: FormBuilder) {}
formdata = this.fb.group({
    vehicles: []
});
}

I am getting the output as true or false`` but I want the output as 2 or 4 or 2,4```.

Please help me out.

Answer 1

well, you can use the mat-checkbox alone. Remember, the FormGroup exist even you has no input. So you can use [checked] and (change) to change the value of the formControl.

<form [formGroup]="formdata">
   <label>Vehicles</label><br>
   <mat-radio-group>
      <mat-checkbox  
      (change)="formdata.get('vehicles').setValue($event.checked?2:null)"
      [checked]="formdata.value.vehicles==2" >2 Wheelers</mat-checkbox>
      <mat-checkbox 
      [checked]="formdata.value.vehicles==4"
      (change)="formdata.get('vehicles').setValue($event.checked?4:null)"

      >4 Wheelers</mat-checkbox>
   </mat-radio-group>
</form>

See stackblitz

Update really I don't understand the question, The question was create a serie of checkbox and return an array. The idea it's the same, we has an array (in this case of object) and a FormControl. we can use the own array of objects

So,

<form [formGroup]="formdata">
   <label>Vehicles</label><br>
   <mat-radio-group>
      <mat-checkbox *ngFor="let v of Vehicles" 
         [checked]="v.active" 
         (change)="v.active=$event.checked;setVehicles()">
          {{ v.option }}
       </mat-checkbox>
   </mat-radio-group>
</form>

And the function "setVehicles" is the function that give value to the form. How? filter the array Vehicles and map to the value

setVehicles()
  {
    this.formdata.get('vehicles').setValue(
       this.Vehicles.filter(x=>x.active) //first filter
       .map(x=>x.value)  //second map to get only the "value"
    )
  }

See the new stackblitz

NOTE: I use the same array of objects and add a property "active" "on fly" (this is because I defined the array as :any[])

NOTE2: In this case I give value to the formControl each time you change any check-box, this action can be used only when we submit the form