无法从 FormGroup 创建 mat-radio-group

Question

我正在尝试从 FormGroup 中的一组静态 FormControl 创建一组单选按钮，并在一个为真时进行默认检查。

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只允许在不同的选项中选择一个唯一的选项，所以你只需要一个唯一的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
  {
    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

无法从 FormGroup 创建 mat-radio-group

Unable to create mat-radio-group from FormGroup

angular-material

angular

angular-forms

formgroups