Stiamo provando a costruire i nostri componenti del campo forma presso la nostra azienda. Stiamo cercando di avvolgere i componenti del design del materiale in questo modo:

campo:

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

casella di testo:

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

Uso:

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

Ciò si traduce approssimativamente in questo:

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

Ma sto ottenendo "mat-form-field deve contenere un MatFormFieldControl" nella console. Immagino che ciò abbia a che fare con mat-form-field che non contiene direttamente un matInput-field. Ma lo contiene, è solo dentro la proiezione del contenuto di ng.

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

Sfortunatamente la proiezione del contenuto in campo mat-form non è ancora supportata. Tieni traccia del seguente problema con github per ottenere le ultime notizie al riguardo.

Ormai l'unica soluzione per te è posizionare i tuoi contenuti direttamente nel componente mat-form-field o implementare una classe MatFormFieldControl creando così un componente del campo modulo personalizzato.

Ho avuto questo problema. Ho importato MatFormFieldModulenel mio modulo principale, ma ho dimenticato di aggiungere MatInputModulel' importsarray, in questo modo:

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

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

Spero che sia d'aiuto.

Maggiori informazioni qui .

Soluzione 1: importa MatInputModule

importare il MatInputModulemodulo ieapp.module.ts

Angolare 9+

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

Sotto angolare 9

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

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

Soluzione 2 - Errore ortografico

Assicurati di aggiungere matInputed è sensibile al maiuscolo / minuscolo.

<input matInput type="text" />

Citando dalla documentazione ufficiale qui :

Errore: mat-form-field deve contenere un MatFormFieldControl

Questo errore si verifica quando non è stato aggiunto un controllo campo modulo al campo modulo. Se il campo del modulo contiene un nativo o un elemento, assicurati di aver aggiunto la direttiva matInput e di aver importato MatInputModule. Altri componenti che possono fungere da controllo del campo modulo includono e qualsiasi controllo del campo modulo personalizzato che hai creato.

Questo può accadere anche se hai un input appropriato all'interno di un campo mat-form , ma ha un inputngIf . Per esempio:

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

Nel mio caso, mat-chip-listdovrebbe "apparire" solo dopo che i suoi dati sono stati caricati. Tuttavia, la convalida viene eseguita e si mat-form-fieldlamenta

mat-form-field deve contenere un MatFormFieldControl

Per risolverlo, il controllo deve essere lì, quindi ho usato [hidden]:

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

Una soluzione alternativa è proposta da Mosta: move * ngIf per 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
    ]
})

Non sono sicuro che possa essere così semplice ma ho avuto lo stesso problema, cambiando "mat-input" in "matInput" nel campo di input ha risolto il problema. Nel tuo caso vedo "matinput" e la mia app genera lo stesso errore.

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

Se qualcuno si è bloccato con questo errore dopo aver tentato di annidare un <mat-checkbox>, sii di buon umore! Non funziona all'interno di un <mat-form-field>tag.

se qualcuno sta cercando di nidificare un <mat-radio-group>dentro <mat-form-field> come un sotto, otterrai questo errore

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

rimuovere i <mat-form-field>tag principali

Ho avuto anche questo problema e ho un <mat-select>elemento nel mio modello, quando importare MatSelectModule in Module, funziona, non fa scienza, ma spero che possa aiutarti.

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>

Sfortunatamente non posso solo commentare alcune risposte già buone in quanto non ho ancora i punti SO, tuttavia, ci sono 3 moduli chiave di cui avrai bisogno per assicurarti di importare nel modulo genitore del tuo componente, a parte ciò che devi importare direttamente nel tuo componente. Volevo condividerli brevemente ed evidenziare ciò che fanno.

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

I primi due sono per il materiale angolare. Molte persone nuove al materiale angolare si imbatteranno istintivamente in una di queste e non si renderanno conto che la costruzione di una forma richiede entrambe.

Quindi qual è la differenza tra loro?

MatFormFieldModule comprende tutti i diversi tipi di campi modulo disponibili per il materiale angolare. Si tratta più di un modulo di alto livello per i campi modulo in generale, mentre MatInputModule è specifico per i tipi di campo "input", anziché per selezionare caselle, pulsanti di opzione, ecc.

Il terzo elemento dell'elenco sopra è il modulo di forme reattive di Angular. Il modulo di forme reattive è responsabile di una tonnellata di amore angolare nascosto. Se hai intenzione di lavorare con Angular, ti consiglio vivamente di dedicare un po 'di tempo a leggere Angular Docs. Hanno tutte le tue risposte. La creazione di applicazioni raramente NON prevede moduli e, molto spesso, l'applicazione coinvolgerà moduli reattivi. Per questo motivo, ti preghiamo di leggere queste due pagine.

Documenti angolari: forme reattive

Documenti angolari: Modulo di forme reattive

Il primo documento "Forme reattive" sarà la tua arma più potente man mano che inizi, e il secondo documento sarà la tua arma più potente man mano che passerai alle applicazioni più avanzate di Angular Reactive Forms.

Ricorda, questi devono essere importati direttamente nel modulo del tuo componente, non nel componente in cui li stai usando. Se ricordo bene, in Angular 2, abbiamo importato l'intero set di moduli del materiale angolare nel nostro modulo dell'app principale, e quindi importato ciò che dovevamo direttamente in ciascuno dei nostri componenti. Il metodo attuale è molto più efficiente di IMO perché siamo certi di importare l'intero set di moduli di materiale angolare se ne utilizziamo solo alcuni.

Spero che ciò fornisca un po 'più di comprensione sulla costruzione di forme con materiale angolare.

Se tutte le principali risposte relative alla struttura / configurazione del codice sopra riportate non risolvono il problema, ecco un'altra cosa da verificare: assicurati di non aver in alcun modo invalidato il <input>tag.

Ad esempio, ho ricevuto lo stesso mat-form-field must contain a MatFormFieldControlmessaggio di errore dopo aver inserito accidentalmente un requiredattributo dopo una barra a chiusura automatica /, che ha effettivamente invalidato il mio <input/>. In altre parole, l'ho fatto (vedere la fine degli attributi del tag di input):

sbagliato :

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

giusto :

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

Se commetti quell'errore o qualcos'altro per invalidare il tuo <input>, allora potresti ottenere l' mat-form-field must contain a MatFormFieldControlerrore. Comunque, questa è solo un'altra cosa da cercare durante il debug.

Lo stesso errore può verificarsi se hai una diapositiva di tappetino all'interno di un tappetino dal campo come unico elemento nel mio caso che ho avuto

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

Ciò potrebbe accadere se nella <mat-form-field> soluzione Semplice fossero presenti diversi attributi: spostare la diapositiva sulla radice

Puoi provare a seguire questa guida e implementare / fornire il tuo MatFormFieldControl

Ho rimosso accidentalmente matInput direttiva dal campo di input che ha causato lo stesso errore.

per esempio.

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

codice fisso

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

MatRadioModule non funzionerà all'interno di MatFormField. I documenti dicono

Questo errore si verifica quando non è stato aggiunto un controllo campo modulo al campo modulo. Se il campo del modulo contiene un nativo o un elemento, assicurati di aver aggiunto la direttiva matInput e di aver importato MatInputModule. Altri componenti che possono fungere da controllo del campo modulo includono <mat-select>, <mat-chip-list> e qualsiasi controllo campo modulo personalizzato che hai creato.

Nel mio caso, una delle parentesi di chiusura di "onChanges ()" è stata mancata sull'elemento di input e quindi l'elemento di input apparentemente non è stato reso affatto:

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

Una soluzione parziale consiste nell'avvolgere il campo del modulo materiale in un componente personalizzato e implementare l' ControlValueAccessorinterfaccia su di esso. Oltre alla proiezione dei contenuti, l'effetto è praticamente lo stesso.

Vedi l'esempio completo su Stackblitz.

Ho usato FormControl( forme reattive ) all'interno CustomInputComponentma FormGroupo FormArraydovrei funzionare anche se hai bisogno di un elemento di forma più complesso.

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>

Hai perso la matInput direttiva nel tuo tag di input.

Devi importare MatInputModule nel tuo file app.module.ts

importare {MatInputModule} da '@ 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
  ],

Puoi impostare aspect = "fill" all'interno del tuo tag mat-form-field, funziona per me

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

Angolare 9+ ... Materiale 9+

Ho notato che 3 errori possono dare origine allo stesso errore:

1. Assicurati di aver importato MatFormFieldModule e MatInputModule in app.module o module.ts in cui vengono importati i componenti (nel caso di moduli nidificati)
2. Quando si avvolgono i pulsanti del materiale o la casella di controllo nel campo modulo opaco. Vedi l'elenco dei componenti del materiale che possono essere avvolti con mat-form-field mat-form-field
3. Quando non riesci a includere matInput nel tuo tag. cioè <input matInput type = "number" step = "0.01" formControlName = "price" />

La nuova importazione del modulo MatInput aggiornato è:

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

Come da API materiali angolari

Nel mio caso ho cambiato questo:

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

a questa:

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

L'aggiunta della direttiva matInput al tag di input è stato ciò che ha risolto questo errore per me.

Potresti aver perso l'importazione di MatInputModule

usa i provider nel file component.ts

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

Nota Qualche volta si verifica un errore, quando usiamo il tag "campo modulo-mat" attorno al pulsante di invio come:

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

Quindi gentilmente non utilizzare questo tag attorno al pulsante di invio

Ho avuto lo stesso problema

il problema è semplice

solo tu devi importare due moduli nel tuo progetto

MatFormFieldModule MatInputModule

stavo ottenendo lo stesso problema a causa dell'elemento commentato come segue.

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

il campo modulo dovrebbe avere elemento! (es. input, textarea, select, ecc.)