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

Question

我现在正在学习 Angular。我正在制作一个包含一组复选框的反应式表单。我已经使用 Angular Material 创建了这些复选框。到目前为止，在谷歌搜索了一整天后，我无法想出一个解决方案来告诉我在 TS 文件中的 FormGroup 中获取复选框选中的值。我附上代码。

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: []
});
}

我得到的输出为 true or false`` but I want the output as2 或 4 或 2,4```。

请帮帮我。

Answer 1

好吧，您可以单独使用 mat-checkbox。请记住，即使您没有输入，FormGroup 也存在。所以可以使用[checked]和(change)来改变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>

见stackblitz

更新我真的不明白这个问题，问题是创建一系列复选框并返回一个数组。想法是一样的，我们有一个数组（在这种情况下是对象）和一个 FormControl。我们可以使用自己的对象数组

所以，

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

函数“setVehicles”是赋予表单价值的函数。如何？过滤数组 Vehicles 并映射到值

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

见new stackblitz

注意：我使用相同的对象数组并添加一个属性“active”“on fly”（这是因为我将数组定义为：any[]）

注意2：在这种情况下，每次您更改任何复选框时，我都会为formControl赋值，此操作仅在我们提交表单时才能使用