如何以 Angular Reactive 形式获取复选框值 [英] How to fetch checkbox value in Angular Reactive form

问题描述

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

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

我得到的输出为 true 或 false`` 但我希望输出为 2 或 4 或 2,4```.

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

请帮帮我.

推荐答案

好吧，您可以单独使用 mat-checkbox.请记住，即使您没有输入，FormGroup 也存在.所以你可以使用[checked]和(change)来改变formControl的值.

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>

参见stackblitz

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

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

所以，

<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 并映射到值

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

查看新的stackblitz

注意:我使用相同的对象数组并添加一个动态"属性动态"(这是因为我将数组定义为 :any[])

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

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

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

这篇关于如何以 Angular Reactive 形式获取复选框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！