web-dev-qa-db-ja.com

Angular 4 mat-form-field with mat-select

そのため、mat-form-fieldでmat-selectを使用すると問題が発生します。 mat-inputでmat-form-fieldを使用することは問題ではなく、インポートも正しいと確信していますが、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をangularマテリアル2に更新したので、最新かつ最高の、しかしまだ何もありません。見落としているものはありますか？私がすでに試してみたそれぞれの解決策は、運がなかった。

mat-selectが正しく機能しない
mat-form-fieldにはMatFormFieldControlが含まれている必要があります

angularangular-material2angular4-forms
6
John Stafford

私は同様の問題に直面していましたが、これから issue githubでngIfをmat-selectにしないでください。

これはいくつかの助けになるかもしれません：

マット選択にngIfがないことを確認してください。

4
skm

ネストされたmat-selectにmatInput属性を追加してみてください（エラーメッセージが示唆するとおり）：

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

この構造は私には有効です。

UPD.:クイックplnkrの例 https://plnkr.co/edit/9Yz6xkcVMCMpRhP3Qse9

1
grumbler_chester

my angular=を最新リリースに更新しました。この場合は5で、問題を修正しました

0
John Stafford