Angular 4 mat-form-field with mat-select

Posted 2023-03-13

【中文标题】Angular 4 mat-form-field with mat-select

【英文标题】：

【发布时间】：2018-04-16 16:57:53

【问题描述】：

所以，我在使用 mat-select 和 mat-form-field 时遇到问题。将 mat-form-field 与 mat-input 一起使用不是问题，而且我相当确定我的导入也是正确的，但是在尝试使用 mat-select 时收到以下错误：

错误：md-form-field 必须包含 MdFormFieldControl。是不是忘了给原生添加 mdInput...

我的 html 代码如下：

<mat-form-field class="full-width">
  <mat-select name="sampleType" formControlName="sampleTypeCtrl" 
   placeholder="Sample Type" required>
     <mat-option *ngFor="let sample of samples" [value]="sample.value">
        sample.viewValue 
     </mat-option>
  </mat-select>
</mat-form-field>

包含此组件并导入到我的主 app.module.ts 文件中的视图模块如下：

...
import  MatFormFieldModule, MatInputModule, MatSelectModule  from 
   '@angular/material';
...

@NgModule(
  imports: [
    ...
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    ...
  ],
)
export class ViewModule 

我的主 app.module.ts 文件包含 ViewModule 和 NoConflictStyleCompatibilityMode 导入，如下所示：

...
import  ViewModule  from './view/view.module';
import  NoConflictStyleCompatibilityMode  from '@angular/material';
...
@NgModule(
  ...
  imports: [
    ViewModule,
    NoConflictStyleCompatibilityMode
  ],
  ...
)
export class AppModule  

当我从 mat-select 周围删除 mat-form-field 时，错误消失了，但是我发现 mat-input（使用 mat-form-field）和 mat-select 的样式不一致。我正在同时导入 MatSelectModule 和 MatFormFieldModule，但出现此错误。我还更新了我的角度材料 2 的 npm，以便它具有最新和最好的，但仍然没有。我在看什么？我在最近的 ***s 中看到了此类问题，但我已经尝试过每个解决方案都没有运气。

mat-select Not Working Properlymat-form-field must contain a MatFormFieldControl

【问题讨论】：

这些模块 MatInputModule, MatFormFieldModule, MatSelectModule 存在于 ViewModule 中，但它们不是 AppModule 的一部分。您应该从 ViewModule 导出材质模块

【参考方案1】：

尝试将matInput 属性添加到您的嵌套mat-select（如错误消息所示）：

<mat-form-field>
    <mat-select matInput name="mySelect">
        <mat-option>
            ...
        </mat-option>
    </mat-select>
</mat-form-field>

这个结构对我有用。

UPD.: 快速 plnkr 示例 https://plnkr.co/edit/9Yz6xkcVMCMpRhP3Qse9

【讨论】：

感谢您的回复。当我添加 'matInput' 时，我仍然收到以下错误：错误：md-form-field 必须包含 MdFormFieldControl。是不是忘记给原生添加 mdInput 了……

另外，为什么它还在抱怨使用'md'前缀的东西呢？我已将所有内容切换为使用“mat”前缀。这令人困惑。

您能否检查一下您的模块是否导入了 MatInputModule、MatSelectModule 和 MatFormFieldModule？您能否提供代码的 plnkr 示例？

还有一件事是需要导入材质主题才能使用组件。 github.com/angular/material2/issues/6948你用了吗？

是的，我已经导入了一个主题，并在我的模块中导入了 MatInputModule、MatSelectModule 和 MatFormFieldModule。今晚我会努力完成一个笨拙的工作。

【参考方案2】：

刚刚将我的角度更新到最新版本，在这种情况下是 5，它解决了问题

【参考方案3】：

我遇到了类似的问题，从 github 上的 issue 我意识到 ngIf 一定不能在 mat-select 上。

这可能对某些人有所帮助：

确保您的 mat-select 上没有 ngIf。