问题
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.
回答1:
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.
回答2:
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.
来源:https://stackoverflow.com/questions/57188022/angular-4-mat-radio-group-with-mat-form-field-return-error