Angular Группа переключателей формы "Реактивная форма материала" не работает

Question

Я хочу реализовать радиогруппу Angular Material в своем приложении, я получаю следующую ошибку:

  ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError 

вот мой код:

компонент:

    this.taskForm = this._formBuilder.group({
  Schedule: ['', Validators.required],
  StartDate: ['', Validators.required],
  EndDate: ['', Validators.required],

});

компонент. html:

   <div>
                    <mat-form-field>
                        <label id="example-radio-group-label">Schedule: </label>
                        <mat-radio-group aria-labelledby="example-radio-group-label" *ngFor="let season of seasons" formControlName="Schedule" class="example-radio-group">
                            <label for="{{season}}" class="radio-inline"></label>
                            <mat-radio-button id="{{season}}"  class="example-radio-button"  [value]="season" [checked]="season==='Spring'" >
                                {{season}}
                            </mat-radio-button>
                        </mat-radio-group>
                    </mat-form-field>
                </div>

Answer 1

Исправьте две вещи в вашем коде:

1- Поместите свой код за пределы поля mat-form, прочитайте больше (https://v5.material.angular.io/components/form-field/overview)

2- обновите свой код и поместите ngFor внутри mat-radio-button

       <div>
                        <label id="example-radio-group-label">Schedule: </label>
                        <mat-radio-group aria-labelledby="example-radio-group-label" formControlName="Schedule" class="example-radio-group">
                            <label for="{{season}}" class="radio-inline"></label>
                            <mat-radio-button id="{{season}}"  *ngFor="let season of seasons" class="example-radio-button"  [value]="season" >
                                {{season}}
                            </mat-radio-button>
                        </mat-radio-group>
                </div>