Mat-Button 错误：mat-form-field 必须包含 MatFormFieldControl答案

【问题标题】：Mat-Button Error: mat-form-field must contain a MatFormFieldControlMat-Button 错误：mat-form-field 必须包含 MatFormFieldControl
【发布时间】：2020-09-05 15:07:23
【问题描述】：

我有以下标记：

<div fxLayout="row" fxLayoutAlign="start start">
        <mat-form-field class="company-filter-form">
            <mat-select placeholder="Actionss">
                <mat-option [value]=""></mat-option>
                <mat-option value="Delete">Delete</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field class="company-filter-form">
            <button mat-flat-button color="primary">Apply</button>
        </mat-form-field>

然后我得到这个渲染错误：

ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (form-field.js:109)

所有模块均导入MatButtonModule、MatFormFieldModule & MatInputModule。

如何将 mat-button 添加到 mat-select 的同一行？

【问题讨论】：

mat-form-field 元素内的按钮无效 - 看到您打算将按钮设置为“提交”按钮，您可以尝试将 type 属性设置为 submit .
MatFormFIeld 用于表单标签的附加行为，并希望包装表单标签。这就是您在包装按钮的 mat-form-field 上收到此错误的原因。

标签： angular angular-material

【解决方案1】：

不要用mat-form-field 包裹按钮。 MatFormField 是一个组件，用于包装多个 Angular Material 组件并应用常见的文本字段样式，例如下划线、浮动标签和提示消息。您可以只输入div，而不是mat-form-field。它将解决您的问题。

    <div class="company-filter-form">
        <button mat-flat-button color="primary">Apply</button>
    </div>

【讨论】：

谢谢。我添加了一个 div，只需要对其进行样式匹配（这有点痛苦）