私たちは自社で独自のフォームフィールドコンポーネントを構築しようとしています。マテリアルデザインのコンポーネントを次のようにラップしようとしています。

フィールド：

<mat-form-field>
    <ng-content></ng-content>
    <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
    <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    <mat-error>This field is required</mat-error>
</mat-form-field>

テキストボックス：

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

使用法：

<textbox value="test" hint="my hint"></textbox>

これにより、おおよそ次のようになります。

    <textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
       <field>
          <mat-form-field class="mat-input-container mat-form-field>
             <div class="mat-input-wrapper mat-form-field-wrapper">
                <div class="mat-input-flex mat-form-field-flex">
                   <div class="mat-input-infix mat-form-field-infix">
                      <input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">
                      <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
                   </div>
                </div>
                <div class="mat-input-underline mat-form-field-underline">
                   <span class="mat-input-ripple mat-form-field-ripple"></span>
                </div>
                <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
             </div>
          </mat-form-field>
       </field>
    </textbox>

しかし、コンソールで「mat-form-fieldにはMatFormFieldControlが含まれている必要があります」が表示されます。これは、直接matInput-fieldを含まないmat-form-fieldに関係していると思います。しかし、それはそれを含んでいます、それは単にng-contentプロジェクションを使い果たしています。

これが電撃です：https : //stackblitz.com/edit/angular-xpvwzf

残念ながら、mat-form-fieldへのコンテンツの投影はまだサポートされていません。次のgithubの問題を追跡して、最新のニュースを入手してください。

これまでの唯一の解決策は、コンテンツを直接マットフォームフィールドコンポーネントに配置するか、MatFormFieldControlクラスを実装して、カスタムフォームフィールドコンポーネントを作成することです。

私はこの問題を抱えていました。MatFormFieldModuleメインモジュールでインポートしましたが、次のように配列に追加するのMatInputModuleを忘れましimportsた：

import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

それが役に立てば幸い。

詳細はこちら。

解決策1-MatInputModuleをインポートする

MatInputModuleモジュール内にインポートすなわちapp.module.ts

import { MatInputModule } from '@angular/material';

@NgModule({
  imports: [
     // .......
     MatInputModule
     // .......
  ]
})
export class AppModule { }

解決策2-スペルミス

必ず追加matInputしてください。大文字と小文字が区別されます。

<input matInput type="text" />

ここの公式ドキュメントから引用すると：

エラー：mat-form-fieldにはMatFormFieldControlが含まれている必要があります

このエラーは、フォームフィールドコントロールをフォームフィールドに追加していない場合に発生します。フォームフィールドにネイティブまたは要素が含まれている場合は、それにmatInputディレクティブが追加され、MatInputModuleがインポートされていることを確認してください。フォームフィールドコントロールとして機能できるその他のコンポーネントには、、、および作成したカスタムフォームフィールドコントロールがあります。

これは、mat-form-field内に適切な入力がある場合にも発生する可能性がありますが、それはngIfオンです。例えば：

<mat-form-field>
    <mat-chip-list *ngIf="!_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

私の場合、mat-chip-listデータがロードされた後にのみ「出現」するはずです。ただし、検証が実行され、mat-form-field不満があります

mat-form-fieldにはMatFormFieldControlが含まれている必要があります

それを修正するには、コントロールがそこになければならないので、私は使用しました[hidden]：

<mat-form-field>
    <mat-chip-list [hidden]="_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

別のソリューションが提案されていMostaます：move * ngIf for mat-form-field：

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

import {MatInputModule} from '@angular/material/input';



@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})

これが簡単かどうかはわかりませんが、同じ問題がありました。入力フィールドで「mat-input」を「matInput」に変更すると、問題が解決しました。あなたの場合、「matinput」が表示され、それが原因でアプリが同じエラーをスローします。

<input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">

「matinput」

「matInput」

をネストしようとした後に誰かがこのエラーで行き詰まった場合は<mat-checkbox>、元気でいてください！<mat-form-field>タグ内では機能しません。

誰かが 以下<mat-radio-group>の<mat-form-field>ような中にネストしようとすると、このエラーが発生します

         <mat-form-field>
                <!-- <mat-label>Image Position</mat-label> -->
                <mat-radio-group aria-label="Image Position" [(ngModel)]="section.field_1">
                    <mat-radio-button value="left">Left</mat-radio-button>
                    <mat-radio-button value="right">Right</mat-radio-button>
                </mat-radio-group>
            </mat-form-field>

親<mat-form-field>タグを削除する

私もこの問題を抱えていて<mat-select>、テンプレートに要素があります。MatSelectModuleをモジュールにインポートすると機能しますが、科学的にはなりませんが、それが役立つことを願っています。

import { MatSelectModule } from '@angular/material/select';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCardModule,
    MatSelectModule
],

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>

残念ながら、SOポイントがまだないため、すでに良い回答についてコメントすることはできませんが、コンポーネントの親モジュールにインポートしていることを確認するために必要な3つの主要モジュールがあります。コンポーネントに直接インポートする必要があります。私はそれらを簡単に共有し、彼らが何をしているのかを強調したかった。

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

最初の2つはAngular Material用です。Angular Materialの初心者の多くは、本能的にこれらの1つに遭遇し、フォームの作成には両方が必要であることを理解していません。

では、それらの違いは何ですか？

MatFormFieldModuleは、Angular Materialが利用できるすべての異なるタイプのフォームフィールドを網羅しています。これは一般にフォームフィールド用の高レベルモジュールですが、MatInputModuleは、選択ボックスやラジオボタンなどではなく、「入力」フィールドタイプ用です。

上記のリストの3番目の項目は、AngularのReactive Forms Moduleです。Reactive Forms Moduleは、膨大な量のAngular愛の責任を負っています。Angularを使用する場合は、Angular Docsを読むことをお勧めします。彼らはあなたの答えをすべて持っています。アプリケーションの構築にはフォームが含まれることはめったになく、ほとんどの場合、アプリケーションにはリアクティブフォームが含まれます。そのため、この2つのページをよくお読みください。

Angular Docs：反応型フォーム

Angular Docs：Reactive Forms Module

最初のドキュメント「Reactive Forms」は、開始時に最も強力な武器になり、2番目のドキュメントは、Angular Reactive Formsのより高度なアプリケーションに進むときに最も強力な武器になります。

これらは、使用しているコンポーネントではなく、コンポーネントのモジュールに直接インポートする必要があることを覚えておいてください。覚えていると思いますが、Angular 2では、Angular Materialモジュールのセット全体をメインのアプリモジュールにインポートしてから、各コンポーネントに直接必要です。現在の方法は、一部のみを使用する場合にAngular Materialモジュールのセット全体をインポートすることが保証されているため、はるかに効率的なIMOです。

これにより、Angular Materialを使用したフォームの構築についてもう少し洞察が得られることを願っています。

上記のすべてのメインコード構造/構成の回答で問題が解決しない場合は、次のことを確認してください<input>。タグを無効にしていないことを確認してください。

例えば、私は同じ受信mat-form-field must contain a MatFormFieldControl誤って入れた後、エラーメッセージをrequired属性をした後、自動閉鎖スラッシュ/効果的に私の無効、<input/>。つまり、これを行いました（入力タグ属性の最後を参照）。

間違った：

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" /required>

右：

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" required/>

その間違いや何かを行ってを無効にする<input>と、mat-form-field must contain a MatFormFieldControlエラーが発生する可能性があります。とにかく、これはデバッグしているときに探すべきもう1つのことです。

私の場合の唯一の要素として、フィールドからのマット内にマットスライドがある場合にも同じエラーが発生する可能性があります

 <mat-form-field>
    <mat-slide-toggle [(ngModel)]="myvar">
       Some Text
     </mat-slide-toggle>
 </mat-form-field>

これは、<mat-form-field> シンプルなソリューション内にいくつかの属性があり、スライドのトグルをルートに移動することであった場合に発生する可能性があります

このガイドに従って、独自のMatFormFieldControlを実装/提供してみてください。

同じ入力フィールドから誤ってmatInputディレクティブを削除したため、同じエラーが発生しました。

例えば。

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

固定コード

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

MatRadioModuleはMatFormField内では機能しません。ドキュメントは言います

このエラーは、フォームフィールドコントロールをフォームフィールドに追加していない場合に発生します。フォームフィールドにネイティブまたは要素が含まれている場合は、それにmatInputディレクティブが追加され、MatInputModuleがインポートされていることを確認してください。フォームフィールドコントロールとして機能できる他のコンポーネントには、 <mat-select>、<mat-chip-list>、および作成したカスタムフォームフィールドコントロールがあります。

私の場合、 "onChanges（）"の右括弧の1つが入力要素で欠落していたため、入力要素がまったくレンダリングされていなかったようです。

<input mat-menu-item 
      matInput type="text" 
      [formControl]="myFormControl"
      (ngModelChange)="onChanged()>

部分的な解決策は、マテリアルフォームフィールドをカスタムコンポーネントでラップし、そのControlValueAccessorインターフェイスを実装することです。コンテンツの投影以外の効果はほとんど同じです。

Stackblitzの完全な例を参照してください。

私が使用FormControl（反応性フォーム）の内側にCustomInputComponentなく、FormGroupまたはFormArrayあなたがより複雑なフォーム要素が必要な場合は、あまりにも動作するはずです。

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <mat-form-field appearance="outline" floatLabel="always" color="primary">
    <mat-label>First name</mat-label>
    <input matInput placeholder="First name" formControlName="firstName" required>
    <mat-hint>Fill in first name.</mat-hint>
    <mat-error *ngIf="firstNameControl.invalid && (firstNameControl.dirty || firstNameControl.touched)">
      <span *ngIf="firstNameControl.hasError('required')">
        You must fill in the first name.
      </span>
    </mat-error>
  </mat-form-field>

  <custom-input
    formControlName="lastName"
    [errorMessages]="errorMessagesForCustomInput"
    [hint]="'Fill in last name.'"
    [label]="'Last name'"
    [isRequired]="true"
    [placeholder]="'Last name'"
    [validators]="validatorsForCustomInput">
  </custom-input>

  <button mat-flat-button
    color="primary"
    type="submit"
    [disabled]="form.invalid || form.pending">
    Submit
  </button>

</form>

custom-input.component.html

<mat-form-field appearance="outline" floatLabel="always" color="primary">
  <mat-label>{{ label }}</mat-label>

  <input
    matInput
    [placeholder]="placeholder"
    [required]="isRequired"
    [formControl]="customControl"
    (blur)="onTouched()"
    (input)="onChange($event.target.value)">
  <mat-hint>{{ hint }}</mat-hint>

  <mat-error *ngIf="customControl.invalid && (customControl.dirty || customControl.touched)">
    <ng-container *ngFor="let error of errorMessages">
    <span *ngFor="let item of error | keyvalue">
      <span *ngIf="customControl.hasError(item.key)">
        {{ item.value }}
      </span>
    </span>
    </ng-container>
  </mat-error>
</mat-form-field>

matInput 入力タグのディレクティブがありません。

MatInputModuleをapp.module.tsファイルにインポートする必要があります

'@ angular / material'から{MatInputModule}をインポートします。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CustomerPage } from './components/customer/customer';
import { CustomerDetailsPage } from "./components/customer-details/customer-details";
import { CustomerManagementPageRoutingModule } from './customer-management-routing.module';
import { MatAutocompleteModule } from '@angular/material/autocomplete'
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    CustomerManagementPageRoutingModule,
    MatAutocompleteModule,
    MatInputModule,
    ReactiveFormsModule,
    MatFormFieldModule
  ],

あなたはあなたのmat-form-fieldタグの中にappearance = "fill"を設定することができます、それは私のために働きます

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Username Or Email</mat-label>
    <input matInput placeholder="Username Or Email" type="text">
  </mat-form-field>

  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Password</mat-label>
    <input matInput placeholder="Password" type="password">
  </mat-form-field>
</form>

Angular 9+ ...素材9+

私は3つの間違いが同じエラーを引き起こす可能性があることに気づきました：

1. コンポーネントがインポートされているapp.moduleまたはmodule.tsにMatFormFieldModuleおよびMatInputModuleがインポートされていることを確認してください（ネストされたモジュールの場合）
2. mat-form-fieldでマテリアルボタンまたはチェックボックスをラップするとき。マットフォームフィールドマットフォームフィールドでラップできるマテリアルコンポーネントのリストを見る
3. タグにmatInputを含めなかった場合。つまり、<input matInput type = "number" step = "0.01" formControlName = "price" />

私の場合、これを変更しました：

<mat-form-field>
  <input type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

これに：

<mat-form-field>
  <input matInput type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

このエラーは、inputタグにmatInputディレクティブを追加することで解決しました。

あなたはMatInputModuleをインポートするのを逃したかもしれません

注 ：次のように送信ボタンの周りに「mat-form-field」タグを使用すると、エラーが発生することがあります。

<mat-form-field class="example-full-width">
   <button mat-raised-button type="submit" color="primary">  Login</button>
   </mat-form-field>

送信ボタンの周りでこのタグを使用しないでください

component.tsファイルでプロバイダーを使用する

@Component({
 selector: 'your-selector',
 templateUrl: 'template.html',
 styleUrls: ['style.css'],
 providers: [
 { provide: MatFormFieldControl, useExisting: FormFieldCustomControlExample }   
]
})

新しく更新されたMatInputモジュールのインポートは次のとおりです。

import {MatInputModule} from '@angular/material/input';

あたりとしてアンギュラ材料API

同じ問題があった

問題は簡単です

あなただけがあなたのプロジェクトに2つのモジュールをインポートする必要があります

MatFormFieldModule MatInputModule

次のようにコメント要素のために同じ問題が発生していました。

<mat-form-field>
    <mat-label>Database</mat-label>
    <!-- <mat-select>
        <mat-option *ngFor="let q of queries" [value]="q.id">
            {{q.name}}
        </mat-option>
    </mat-select>  -->
</mat-form-field>

フォームフィールドには要素が必要です！（例：入力、テキストエリア、選択など）