Angular 无法从FormGroup创建mat无线组

我试图从FormGroup中的一组静态FormControls创建一组单选按钮，当其中一个为true时，默认选中该按钮

组件1.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:

预期产出：

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

---

Stackblitz:

mat无线组只允许在不同选项中选择唯一选项，因此您只需要一个唯一的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>

---

谢谢你的解释，这有助于理解很多。只是想检查一下，在getIndex（）中，const字段是否冗余？对不起，我在代码中错误地留下了它，我只是删除了它

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

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>

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

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