Невозможно создать группу mat-radio-group из FormGroup - PullRequest
Новая
       86

Невозможно создать группу mat-radio-group из FormGroup

0 голосов
/ 17 июня 2020

Я пытаюсь создать набор переключателей из статического c набора FormControls в FormGroup, и по умолчанию проверяется, если оно истинно.

Component.ts: 

export class RadioOverviewExample {

  public formModel: FormGroup;

  constructor() {}

  public ngOnInit() {
    this.formModel = new FormGroup({
      formName: new FormControl(''),
      formId: new FormControl(''),
      radioOptions: new FormGroup({
        train: new FormControl(true),
        subway: new FormControl(false),
        bus: new FormControl(false),
        taxi: new FormControl(false)
      })
    })
  }    
}

HTML: 

<form [formGroup]="formModel">

    <mat-radio-group formGroupName="radioOptions">
        <mat-radio-button *ngFor="let op of radioOptions.controls">
      {{op}}
    </mat-radio-button>
    </mat-radio-group>

</form>

Ошибка: 

Error: Cannot read property 'controls' of undefined

Ожидаемый результат: 

[X] Train   [] Subway   [] Bus   [] Taxi

Stackblitz: https://stackblitz.com/edit/angular-kc5k9c

1 Ответ

1 голос
/ 18 июня 2020

Группа mat-radio-group позволяет выбрать только уникальный вариант среди разных вариантов, поэтому вам нужен только уникальный FormControl. Вы используете вспомогательный массив для отображения параметров - не элемента управления в форме 

transports=[{value:0,text:"Train"},
       {value:1,text:Subway},
       {value:2,text:"Bus"},
       {value:3,text="Taxi"}
      ]

<mat-radio-group formGroupName="radioOptions">
    <mat-radio-button *ngFor="let op of transports" [value]="op.value">
    {{op.text}}
   </mat-radio-button>
</mat-radio-group>

и вашего formModel.get ('radioOptions'). Значение становится 0,1,2 или 3

Вы также можете использовать отдельную группу mat-radio-group и использовать [value] и (change) для придания значения различным элементам управления formGroup. Помните, что FormControl существует, даже если у нас нет элемента управления вводом 

<mat-radio-group [value]="getIndex()"
                 (change)=setValue($event.value) 
    <mat-radio-button *ngFor="let op of transports" [value]="op.value">
    {{op.text}}
   </mat-radio-button>
</mat-radio-group>

И в .ts 

  getIndex() //return the index of the first is true
  {
    return Object.keys(this.formModel.value.radioOptions).findIndex(
      x => this.formModel.value.radioOptions[x]
    );
  }
  setValue(index: number) {
    Object.keys((this.formModel.get("radioOptions") as FormGroup).controls).forEach(
      (field, i) => {
        const control=this.formModel.get("radioOptions."+field)
        if (control)
          control.setValue(i == index);
      }
    );
  }

stackblitz с последней частью

...