Angular Materialって便利ですよね。
簡単にリッチな入力欄を用意することができるので、スタイル適用が苦手でもある程度の水準でデザインすることができます。
私もAngular Materialの便利さに取り憑かれ、色々と実装をしています。
そんなある日、Angular Materialでインプットフォーム（入力欄）を実装しようと思い、公式ページを参考に取り組んでみたのですが、以下のようなエラーが発生しました。
Error:mat-form-field must contain a MatFormFieldControl
その際の対処法をメモしておきましたので、記事にしておこうと思います。
そんなわけで、今回はAngular MaterialでError:mat-form-field must contain a MatFormFieldControlが出た場合の対処法をご紹介しますね。
今回の環境は以下の通りです。
- Angular CDK：8.2.3
- Angular CLI：8.3.20
- Angular Material：8.2.3
matInputにはコンポーネントのインポートが必要です！
まずは、エラーが出た際のコードをお見せしますね。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatFormFieldModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app.component.html
<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>お名前</mat-label>
<input matInput>
</mat-form-field>
</div>この状態の時に、表題のエラーが発生したのです。
エラーの原因はコンポーネント不足
さて、原因を調べてみると、どうやらコンポーネントのインストールが足りていなかったようです。
以下のissueで解決策が提示されていました。
参考：Error: mat-form-field must contain a MatFormFieldControl. #7898
私が書いた上記コードにはinputタグの箇所にmatInputとありますが、これを利用するには専用のモジュールのインポートが必要なんですね。
そのモジュールがMatInputModuleということのようです。
Angular Materialの入力フォームを実装してみた！
それでは早速修正してみましょう。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'; // <-- 追加
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatFormFieldModule,
MatInputModule, // <-- 追加
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app.component.html
HTMLはそのままです。
<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>お名前</mat-label>
<input matInput>
</mat-form-field>
</div>app.component.scss
せっかくなので、見やすくするために色をつけておきましょうか。
.example-container {
display: grid; // 入力欄を横幅いっぱいに広げます
background-color: black;
input {
color: white;
}
}入力フォームの確認
これで再実行してみましょう。
以下のように表示されました！
入力欄をクリックしてみます。
ラベルが左上に移動していますね。
ちゃんと機能しているようです！
これで一安心ですね。
文字を入力するとこんな感じです。
色や配置を整えればもっと見やすくなると思いますよ！
終わりに
今回はAngular MaterialでError:mat-form-field must contain a MatFormFieldControlが出た場合の対処法についてご紹介しました。
matInputを利用するにはMatInputModuleが必要！
今回はここまでです。それでは。
