web-dev-qa-db-ja.com

mat-form-fieldはMatFormFieldControlを含めなければなりません

私達は私達の会社で私達自身のフォームフィールドコンポーネントを構築しようとしています。材料設計のコンポーネントを次のようにラップしようとしています。

フィールド：

<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

angularangular-material2
84
Viktor Eriksson

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

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

7
n.yakovenko

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

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

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

それが役に立てば幸い。

より多くの情報 ここ 。

228
darksoulsong

解決策1

MatInputModuleをapp.module.ts内にインポート

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

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

解決策2

matInputのつづりを確認し、大文字と小文字が区別されることを確認してください

<input matInput type="text" />
47
WasiF

公式文書からの引用 ここ ：

エラー：mat-form-fieldはMatFormFieldControlを含まなければなりません

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

12
user158

これが単純かどうかはわかりませんが、同じ問題があり、入力フィールドで "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"

enter image description here

"matInput"

enter image description here

5
ReturnTable

これは、 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>
5
Alexei

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

3
Mina

私もこの問題を抱えていました、そして私がテンプレートに<mat-select>要素を持っています、私がModuleに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>
1
user9001817

上記の主要なコード構造/構成のすべての答えで問題が解決しない場合は、もう1つ確認する必要があります。<input>タグを何らかの方法で無効にしていないことを確認してください。

たとえば、誤ってrequired属性afterを閉じた後にmat-form-field must contain a MatFormFieldControlエラーメッセージを受け取りました/。これは<input/>を事実上無効にしました。言い換えれば、私はこれを行いました（inputタグの属性の終わりを参照）：

wrong：

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

right：

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

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

1
cjn

MatRadioModuleはMatFormField内では機能しません。 docs say

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

1
intotecho

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

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

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

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

これは、<mat-form-field>内にいくつかの属性があった場合に発生する可能性があります。簡単な解決策は、スライドトグルをルートに移動することでした

0
Kamana Kisinga

あなたはこの ガイド に従うことを試みることができて、そしてあなた自身のMatFormFieldControlを実行する/提供することができます

0
rivanov

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

  1. MatInputModule
  2. MatFormFieldModule
  3. ReactiveFormsModule

最初の2つはAngularマテリアル用です。 Angularマテリアルを初めて使用する多くの人々は、本能的にこれらの1つに出くわし、フォームの作成には両方が必要であることを認識しません。

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

MatFormFieldModuleは、Angular Materialで利用可能なフォームフィールドのさまざまなタイプをすべて網羅しています。これは、一般にフォームフィールド用の高レベルモジュールです。一方、MatInputModuleは、選択ボックス、ラジオボタンなどとは対照的に、「入力」フィールドタイプ専用です。

上記のリストの3番目の項目は、Angularのリアクティブフォームモジュールです。リアクティブフォームモジュールは、大量のAngularの愛に責任を負います。 Angularを使用する場合は、Angularのドキュメントを読むことをお勧めします。彼らはあなたの答えをすべて持っています。アプリケーションの構築にフォームが関与することはめったにありません。また、たいていの場合、アプリケーションにはリアクティブフォームが関与します。そのため、時間をかけてこれらの2つのページをお読みください。

Angular Docs：Reactive Forms

Angular Docs：Reactive Forms Module

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

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

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

0
anothercoder

誤って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>
0
Franklin Pious

私の場合はこれを変更しました。

<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ディレクティブを追加することで、このエラーが修正されました。

0
Gilmourguru