首页 文章

Angular 4 mat-form-field，带有mat-select

提问于
浏览 次
6

所以，我在mat-form-field中使用mat-select时遇到了问题 . 使用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，但我收到此错误 . 我还更新了我的npm角度材料2，以便它具有最新和最好的，但仍然没有 . 我在俯瞰什么？我已经看到在最近的stackoverflows中解决了这种类型的问题，但我已经尝试过的每个解决方案都没有运气 .

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

angular angular-material2 angular4-forms

3 回答

  • 1

    我正面临着类似的问题，并且从github上的这个issue我意识到ngIf一定不能在mat-select上 .

    这可能有助于一些人：

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

    回复于
  • 0

    尝试将 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

    回复于
  • 2

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

    回复于

相关问题