Как получить значение флажка в Angular Реактивная форма - PullRequest
Новая
       22

Как получить значение флажка в Angular Реактивная форма

0 голосов
/ 30 марта 2020

Я учусь Angular сейчас. Я делаю реактивную форму, которая имеет группу флажков. Я создал эти флажки, используя Angular Материал. До сих пор после поисков в течение целого дня я не смог найти решение, которое подсказывало бы мне установить флажок в FormGroup в файле TS. Я прилагаю код здесь.

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 as 2 или 4 или 2,4```.

Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 31 марта 2020

ну, вы можете использовать мат-флажок в одиночку. Помните, FormGroup существуют, даже если у вас нет ввода. Таким образом, вы можете использовать [флажок] и (изменить), чтобы изменить значение 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

Обновление действительно Я не понимаю вопрос, вопрос был создать ser ie флажок и вернуть массив. Идея все та же, у нас есть массив (в данном случае объект) и 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" - это функция, которая присваивает значение форме. Как? отфильтруйте массив «Транспортные средства» и сопоставьте со значением 

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» «на лету» (это потому, что я определил массив следующим образом: any [])

ПРИМЕЧАНИЕ 2. В этом случае я присваиваю значение formControl каждый раз, когда вы меняете какой-либо флажок, это действие можно использовать только когда мы отправляем форму

...