带有 mat-form-field 返回错误的 Angular 4 mat-radio-group [英] Angular 4 mat-radio-group with mat-form-field return Error

问题描述

当我需要为产品打印标签时，我正在一个项目中工作，但是当我使用带有 mat-form-group 的步骤控制来控制步骤时，我收到了错误消息: mat-form-field 必须包含一个 MatFormFieldControl.

我已经尝试将 matInput 设置到 mat-radio-group 中，就像我对 mat-select 所做的那样，但不起作用

这项工作:

 <form [formGroup]=firstFormGroup"><ng-template matStepLabel>通知产品</ng-template><mat-form-field><mat-label>Tipo de produto</mat-label><mat-select matInput formControlName="firstCtrl";需要><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>

</表单>

但这不是:

<form [formGroup]=secondFormGroup"><ng-template matStepLabel>通知产品</ng-template><mat-form-field><mat-label>产品</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>

</表单></mat-step>

ImpressaoComponent.html:24 错误错误:mat-form-field 必须包含 MatFormFieldControl.

解决方案

MatFormField 仅适用于实现 MatFormFieldControl 的组件，例如用于输入和文本区域的 MatInput.以下是 v5 的文档:https://v5.material.angular.io/组件/表单域/概览.MatRadioGroup 没有实现 MatFormFieldControl.您可以创建自己的自定义组件来实现 MatFormFieldControl 并在自定义组件中使用单选组.

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.

解决方案

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.

这篇关于带有 mat-form-field 返回错误的 Angular 4 mat-radio-group的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！