Nous essayons de construire nos propres composants de champ de formulaire dans notre entreprise. Nous essayons d'envelopper les composants de la conception matérielle comme ceci:

champ:

<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>

zone de texte:

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

Usage:

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

Il en résulte à peu près ceci:

    <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>

Mais j'obtiens "mat-form-field doit contenir un MatFormFieldControl" dans la console. Je suppose que cela a à voir avec mat-form-field ne contenant pas directement un matInput-field. Mais il le contient, c'est juste avec la projection ng-content.

Voici un blitz: https://stackblitz.com/edit/angular-xpvwzf

Malheureusement, la projection de contenu dans le champ mat-form-field n'est pas encore prise en charge. Veuillez suivre le problème github suivant pour obtenir les dernières nouvelles à ce sujet.

À présent, la seule solution pour vous est de placer votre contenu directement dans le composant mat-form-field ou d'implémenter une classe MatFormFieldControl créant ainsi un composant de champ de formulaire personnalisé.

J'ai eu ce problème. J'ai importé MatFormFieldModuledans mon module principal, mais j'ai oublié d'ajouter MatInputModuleau importstableau, comme ceci:

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

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

J'espère que ça aide.

Plus d'infos ici .

Solution 1 - Importer MatInputModule

importer à l' MatInputModuleintérieur du module ieapp.module.ts

Angulaire 9+

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

Ci-dessous angulaire 9

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

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

Solution 2 - Erreur d'orthographe

Assurez-vous d'ajouter matInputet il est sensible à la casse.

<input matInput type="text" />

Citant la documentation officielle ici :

Erreur: mat-form-field doit contenir un MatFormFieldControl

Cette erreur se produit lorsque vous n'avez pas ajouté de contrôle de champ de formulaire à votre champ de formulaire. Si votre champ de formulaire contient un élément natif ou un élément, assurez-vous que vous y avez ajouté la directive matInput et que vous avez importé MatInputModule. Les autres composants pouvant servir de contrôle de champ de formulaire incluent, et tous les contrôles de champ de formulaire personnalisés que vous avez créés.

Cela peut également se produire si vous avez une entrée correcte dans un champ mat-form-field , mais il en a un ngIf. Par exemple:

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

Dans mon cas, mat-chip-listest censé "apparaître" uniquement après le chargement de ses données. Cependant, la validation est effectuée et se mat-form-fieldplaint de

mat-form-field doit contenir un MatFormFieldControl

Pour le réparer, le contrôle doit être là, j'ai donc utilisé [hidden]:

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

Une solution alternative est proposée par Mosta: move * ngIf pour 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
    ]
})

Je ne suis pas sûr que cela puisse être aussi simple mais j'ai eu le même problème, changer "mat-input" en "matInput" dans le champ de saisie a résolu le problème. Dans votre cas, je vois "matinput" et mon application génère la même erreur.

<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"

Si quelqu'un est resté coincé avec cette erreur après avoir tenté d'imbriquer un <mat-checkbox>, soyez de bonne humeur! Cela ne fonctionne pas à l'intérieur d'une <mat-form-field>balise.

si quelqu'un essaie d'imbriquer un <mat-radio-group>intérieur <mat-form-field> comme ci-dessous, vous obtiendrez cette erreur

         <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>

supprimer les <mat-form-field>balises parentes

J'ai eu ce problème aussi, et j'ai un <mat-select>élément dans mon modèle, lorsque j'importe le MatSelectModule dans Module, cela fonctionne, cela ne fait pas de science, mais j'espère toujours que cela pourra vous aider.

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>

Malheureusement, je ne peux pas me contenter de commenter certaines réponses déjà bonnes car je n'ai pas encore les points SO, cependant, il y a 3 modules clés dont vous aurez besoin pour vous assurer que vous importez dans le module parent de votre composant, en plus de ce vous devez importer directement dans votre composant. Je voulais les partager brièvement et souligner ce qu'ils font.

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

Les deux premiers sont pour le matériau angulaire. Beaucoup de personnes qui découvrent Angular Material en rencontrent instinctivement un et ne réalisent pas que la construction d'un formulaire nécessite les deux.

Alors, quelle est la différence entre eux?

MatFormFieldModule englobe tous les différents types de champs de formulaire disponibles dans Angular Material. Il s'agit davantage d'un module de haut niveau pour les champs de formulaire en général, alors que le MatInputModule est spécifiquement pour les types de champs `` d'entrée '', par opposition aux boîtes de sélection, aux boutons radio, etc.

Le troisième élément de la liste ci-dessus est le module de formulaires réactifs d'Angular. Le module de formes réactives est responsable d'une tonne d'amour angulaire sous le capot. Si vous allez travailler avec Angular, je vous recommande vivement de passer du temps à lire Angular Docs. Ils ont toutes vos réponses. La création d'applications n'implique que rarement des formulaires et, le plus souvent, votre application impliquera des formulaires réactifs. Pour cette raison, veuillez prendre le temps de lire ces deux pages.

Docs angulaires: formulaires réactifs

Docs angulaires: module de formulaires réactifs

Le premier document «Formulaires réactifs» sera votre arme la plus puissante lorsque vous démarrez, et le deuxième document sera votre arme la plus puissante à mesure que vous passerez à des applications plus avancées de formes réactives angulaires.

N'oubliez pas que ceux-ci doivent être importés directement dans le module de votre composant, pas dans le composant dans lequel vous les utilisez. Si je me souviens bien, dans Angular 2, nous avons importé l'ensemble des modules Angular Material dans notre module d'application principal, puis importé ce nous avions besoin directement dans chacun de nos composants. La méthode actuelle est beaucoup plus efficace IMO car nous sommes assurés d'importer l'ensemble complet des modules de matériau angulaire si nous n'en utilisons que quelques-uns.

J'espère que cela vous donnera un peu plus d'informations sur la construction de formes avec Angular Material.

Si toutes les réponses à la structure / configuration du code principal ci-dessus ne résolvent pas votre problème, voici une dernière chose à vérifier: assurez-vous que vous n'avez pas invalidé votre <input> balise d' .

Par exemple, j'ai reçu le même mat-form-field must contain a MatFormFieldControlmessage d'erreur après avoir accidentellement placé un requiredattribut après une barre oblique à fermeture automatique /, ce qui a effectivement invalidé mon <input/>. En d'autres termes, j'ai fait ceci (voir la fin des attributs de balise d'entrée):

faux :

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

à droite :

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

Si vous faites cette erreur ou quelque chose d'autre pour invalider votre <input>, vous pourriez obtenir l' mat-form-field must contain a MatFormFieldControlerreur. Quoi qu'il en soit, ce n'est qu'une dernière chose à rechercher lors du débogage.

La même erreur peut se produire si vous avez une diapositive de tapis dans un tapis du champ comme seul élément dans mon cas que j'avais

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

Cela peut se produire si vous aviez plusieurs attributs dans la <mat-form-field> solution Simple pour déplacer la bascule de la diapositive à la racine

Vous pouvez essayer de suivre ce guide et implémenter / fournir votre propre MatFormFieldControl

J'ai accidentellement retiré le tapis directive du champ de saisie qui a causé la même erreur.

par exemple.

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

code fixe

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

MatRadioModule ne fonctionnera pas dans MatFormField. Les documents disent

Cette erreur se produit lorsque vous n'avez pas ajouté de contrôle de champ de formulaire à votre champ de formulaire. Si votre champ de formulaire contient un élément natif ou un élément, assurez-vous que vous y avez ajouté la directive matInput et que vous avez importé MatInputModule. Les autres composants pouvant servir de contrôle de champ de formulaire incluent <mat-select>, <mat-chip-list> et tous les contrôles de champ de formulaire personnalisés que vous avez créés.

Dans mon cas, une de mes parenthèses fermantes pour "onChanges ()" a été manquée sur l'élément d'entrée et donc l'élément d'entrée n'était apparemment pas du tout rendu:

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

Une solution partielle consiste à envelopper le champ de formulaire matériel dans un composant personnalisé et à y implémenter l' ControlValueAccessorinterface. Outre la projection de contenu, l'effet est à peu près le même.

Voir l' exemple complet sur Stackblitz.

J'ai utilisé des FormControl( formulaires réactifs ) à l'intérieur, CustomInputComponentmais FormGroupou je FormArraydevrais fonctionner aussi si vous avez besoin d'un élément de formulaire plus complexe.

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>

Vous avez manqué une matInput directive dans votre balise d'entrée.

Vous devez importer le MatInputModule dans votre fichier app.module.ts

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

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
  ],

Vous pouvez définir l'apparence = "fill" dans votre balise mat-form-field, cela fonctionne pour moi

<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>

Angulaire 9+ ... Matériel 9+

J'ai remarqué que 3 erreurs peuvent donner lieu à la même erreur:

1. Assurez-vous d'avoir importé MatFormFieldModule et MatInputModule dans l'app.module ou le module.ts où vos composants sont importés (en cas de modules imbriqués)
2. Lorsque vous enveloppez des boutons de matériau ou une case à cocher dans le champ mat-form-field. Voir la liste des composants de matériau qui peuvent être enveloppés avec mat-form-field mat-form-field
3. Lorsque vous ne parvenez pas à inclure matInput dans votre balise. ie <input matInput type = "number" step = "0.01" formControlName = "price" />

La nouvelle importation du module MatInput mise à jour est:

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

Selon l' API de matériaux angulaires

Dans mon cas, j'ai changé ceci:

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

pour ça:

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

L'ajout de la directive matInput à la balise d'entrée a corrigé cette erreur pour moi.

Vous avez peut-être manqué d'importer MatInputModule

utiliser des fournisseurs dans le fichier component.ts

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

Remarque Une erreur se produit parfois, lorsque nous utilisons la balise "mat-form-field" autour du bouton d'envoi comme:

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

Alors veuillez ne pas utiliser cette balise autour du bouton d'envoi

J'ai eu le même problème

le problème est simple

seulement vous devez importer deux modules dans votre projet

MatFormFieldModule MatInputModule

J'obtenais le même problème en raison de l'élément commenté comme suit.

<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>

Le champ de formulaire doit avoir un élément! (par exemple, l'entrée, la zone de texte, sélectionner, etc.)