Angular 4 mat-radio-group with mat-form-field return Error

0
votes

I'm working in a project when i need to make a steps to print the tags for products, but when i use step control with mat-form-group to control steps, and mat-radio-group i recieve the Error: mat-form-field must contain a MatFormFieldControl.

I already tried set matInput into the mat-radio-group, like i do with mat-select, but does not work

This work:

 <mat-step [stepControl]="firstFormGroup">
                <form [formGroup]="firstFormGroup">
                <ng-template matStepLabel>Informe o tipo de produto</ng-template>
                <mat-form-field>
                    <mat-label>Tipo de produto</mat-label>
                    <mat-select matInput formControlName="firstCtrl" required>
                        <mat-option value="cobrenu">Cobre Nú</mat-option>
                        <mat-option value="cordpar">Cordão Paralelo Torcido</mat-option>
                        <mat-option value="prodpad">Produto Padrão</mat-option>
                    </mat-select>
                </mat-form-field>
                <div>
                    <button mat-button matStepperNext>Próximo</button>
                </div>
                </form>

but this don´t:

<mat-step [stepControl]="secondFormGroup">
                <form [formGroup]="secondFormGroup">
                <ng-template matStepLabel>Informe o produto</ng-template>
                <mat-form-field>
                    <mat-label>Produto</mat-label>
                    <mat-radio-group aria-label="metros" >
                            <mat-radio-button value="1">100</mat-radio-button>
                            <mat-radio-button value="2">200</mat-radio-button>
                            <mat-radio-button value="3">300</mat-radio-button>
                            <mat-radio-button value="4">400</mat-radio-button>
                            <mat-radio-button value="5">500</mat-radio-button>
                            <mat-radio-button value="6">600</mat-radio-button>
                    </mat-radio-group>
                </mat-form-field>
                <mat-radio-group aria-label="metros" >
                        <mat-radio-button value="1">100</mat-radio-button>
                        <mat-radio-button value="2">200</mat-radio-button>
                        <mat-radio-button value="3">300</mat-radio-button>
                        <mat-radio-button value="4">400</mat-radio-button>
                        <mat-radio-button value="5">500</mat-radio-button>
                        <mat-radio-button value="6">600</mat-radio-button>
                </mat-radio-group>
                <div>
                    <button mat-button matStepperPrevious>Voltar</button>
                    <button mat-button matStepperNext>Próximo</button>
                </div>
                </form>
            </mat-step>

ImpressaoComponent.html:24 ERROR Error: mat-form-field must contain a MatFormFieldControl.

2
angular-material

2 Answers

5
votes

MatFormField is only for components which implement MatFormFieldControl like MatInput for inputs and textareas. Here are the docs for v5: https://v5.material.angular.io/components/form-field/overview. MatRadioGroup does not implement MatFormFieldControl. You could create your own custom component that implements MatFormFieldControl and use the radio group inside your custom component.

1
votes

You can do it manually. set all invalid formCnotrols as touched and handle it into html

html:

<mat-error *ngIf="form.controls[index].touched && form.controls[index].invalid">This fields is required</mat-error>

component.ts

 const controls  = this.form.controls; // object of formControls
  // set all fields touched to show error if anyone is invalid.
  Object.keys(controls).forEach(key => {
     controls[key].markAllAsTouched();
  });

with this code i resolved my issue and error shown as expected.