无法从FormGroup创建mat-radio-group

Question

我正在尝试从FormGroup中的一组静态FormControl创建一组单选按钮，并且当一个为true时默认选中。

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

Answer 1

mat-radio-group仅允许在differents选项中选择一个唯一的选项，因此您只需要一个唯一的FormControl。您使用辅助数组来显示选项-而不是Form

中的控件

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'）。value变为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
  {
    const field=Object.keys(this.formModel.value.radioOptions)[0]
    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 with the last part