mat-form-field muss ein MatFormFieldControl enthalten

184

Wir versuchen, in unserem Unternehmen eigene Formfeldkomponenten zu bauen. Wir versuchen, die Komponenten des Materialdesigns wie folgt zu verpacken:

Feld:

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

Textfeld:

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

Verwendung:

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

Dies ergibt ungefähr Folgendes:

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

Aber ich bekomme "mat-form-field muss ein MatFormFieldControl enthalten" in der Konsole. Ich denke, das hat mit mat-form-field zu tun, das nicht direkt ein matInput-Feld enthält. Aber es enthält es, es ist nur mit der ng-content-Projektion.

Hier ist ein Blitz: https://stackblitz.com/edit/angular-xpvwzf

Viktor Eriksson
quelle
3
Haben Sie das Problem jemals gelöst? Ich habe genau das gleiche Problem. Die Antworten sind nicht relevant.
Numsu
Nein, leider nicht :/. Ich habe folgendes gefunden: github.com/angular/material2/issues/9411 und wenn ich das richtig verstehe, wird dies nicht unterstützt.
Viktor Eriksson
Ok .. Danke, am Ende habe ich eine Komponente erstellt, die alle Hinweise und Validierungen zusammenfasst und unter das Eingabeelement stellt.
Numsu
@ViktorEriksson Wenn meine Antwort für Sie nützlich war, möchten Sie sie akzeptieren?
Darksoulsong
1
Es tut mir leid, aber es war nicht nützlich, meine Frage hat sehr wenig mit dieser Antwort zu tun.
Viktor Eriksson

Antworten:

27

Leider wird die Inhaltsprojektion in das Mat-Form-Feld noch nicht unterstützt. Bitte verfolgen Sie das folgende Github-Problem , um die neuesten Nachrichten zu erhalten.

Inzwischen besteht die einzige Lösung für Sie darin, Ihren Inhalt entweder direkt in die Mat-Form-Field-Komponente zu platzieren oder eine MatFormFieldControl-Klasse zu implementieren, um eine benutzerdefinierte Form-Field-Komponente zu erstellen.

n.yakovenko
quelle
131
Ich bin auf diese Frage gestoßen und habe eine Fehlermeldung gegoogelt. Die Antwort unten , die besagt, dass MatInputModuleimportiert werden muss, hat mein Problem gelöst. Da dies die akzeptierte Antwort ist, füge ich den Link hier hinzu und hoffe, dass dies die Zeit anderer spart.
CGFoX
3
Mein Problem war, dass ich es versäumt hatte, ' FormsModule ' zu importieren . Ich hoffe das hilft jemandem.
Lerenau
@CGFoX Du bist absolut richtig, Alter !! Der Import von MatInputModule hat mein Problem gelöst !!
Rafique Mohammed
5
Auch innerhalb eines <mat-form-field>Tags müssen Sie sicherstellen, dass Sie korrekt matInputAttribut auf jedem inputTag oder matNativeControlAttribut auf jedem<select>
svassr
1
@CGFoX Ich wünschte, sie würden die Dokumentation mit diesen Informationen und besseren Beispielen aktualisieren ...
408

Ich hatte dieses Problem. Ich habe MatFormFieldModulean meinem Hauptmodul importiert , aber vergessen MatInputModule, dem importsArray Folgendes hinzuzufügen :

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

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

Ich hoffe es hilft.

Mehr Infos hier .

dunkles Seelenlied
quelle
9
Auch innerhalb eines <mat-form-field>Tags müssen Sie sicherstellen, dass Sie korrekt matInputAttribut auf jedem inputTag oder matNativeControlAttribut auf jedem <select>Tag
hinzugefügt haben
Danke dir. Mein Problem gelöst. Ich bin neu bei Angular Material. Es scheint, dass ich viele, viele Module importieren muss, um Angular Material zu verwenden. Zum Beispiel müssen wir "MatButtonModule" importieren, um Schaltflächen zu verwenden, "MatCheckboxModule", um Kontrollkästchen zu verwenden, "MatFormFieldModule", um Formulare zu verwenden, "MatInputModule", um Eingaben zu verwenden ... Es ist wirklich lästig. Gibt es eine Möglichkeit, nur ein- oder zweimal zu importieren, und dann könnten wir Angular Material ohne weitere Sorgen verwenden?
William Hou
1
WICHTIG: Ordnung ist wichtig!
Becario Senior
funktioniert bei mir nicht, ich habe nur dieses Beispiel verwendet: material.angular.io/components/stepper/overview
tatsu
Das hat bei mir funktioniert import { MatInputModule } from '@angular/material/input':
Jared Whipple
84

Lösung 1 - Importieren Sie MatInputModule

Import MatInputModuleinnerhalb des Moduls dhapp.module.ts

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

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

Lösung 2 - Rechtschreibfehler

Stellen Sie sicher, dass Sie hinzufügen, matInputund es wird zwischen Groß- und Kleinschreibung unterschieden.

<input matInput type="text" />
WasiF
quelle
2
Ahh das hat mich verrückt gemacht. Grund eins hat für mich gearbeitet. Ich bin der Meinung, dass dies in der Dokumentation angegeben werden sollte, auch wenn es jetzt offensichtlich erscheint.
Täuschen Sie den
Ich bin auf dieses Problem gestoßen, als "matInput" in der Eingabeanweisung fehlte.
HadidAli
16

Zitat aus der offiziellen Dokumentation hier :

Fehler: mat-form-field muss ein MatFormFieldControl enthalten

Dieser Fehler tritt auf, wenn Sie Ihrem Formularfeld kein Formularfeldsteuerelement hinzugefügt haben. Wenn Ihr Formularfeld eine native oder ein Element enthält, stellen Sie sicher, dass Sie die Anweisung matInput hinzugefügt und MatInputModule importiert haben. Andere Komponenten, die als Formularfeldsteuerelement fungieren können, sind und alle von Ihnen erstellten benutzerdefinierten Formularfeldsteuerelemente.

user158
quelle
13

Dies kann auch passieren, wenn Sie eine korrekte Eingabe in einem Mat-Form-Feld haben , aber eine darauf hat ngIf. Z.B:

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

In meinem Fall mat-chip-listsoll "erst erscheinen", nachdem seine Daten geladen wurden. Die Validierung wird jedoch durchgeführt und mat-form-fieldbeschwert sich bei

mat-form-field muss ein MatFormFieldControl enthalten

Um das Problem zu beheben, muss das Steuerelement vorhanden sein, daher habe ich Folgendes verwendet [hidden]:

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

Eine alternative Lösung wird vorgeschlagen von Mosta: move * ngIf für mat-form-field:

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>
Alexei
quelle
Ich hatte gerade ein ähnliches Problem, ich habe es mit etwas ähnlichem behoben, wie Sie es sagen. Du hast meine Gegenstimme!
Alex
3
Danke, anstatt versteckt zu verwenden, können Sie die ngIf-Bedingung auf dem gesamten Mat-Form-Feld-Tag verschieben
Mosta
8
import {MatInputModule} from '@angular/material/input';



@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})
Ib Abayomi Alli
quelle
3
Willkommen bei stackoverflow. Fügen Sie bei der Beantwortung von Fragen eine Erklärung hinzu, was Ihr Code-Snippet tut und warum es die Frage des OP löst. Weitere Informationen finden Sie hier. So
antworten Sie
5

Ich bin mir nicht sicher, ob es so einfach sein könnte, aber ich hatte das gleiche Problem. Durch Ändern von "mat-input" in "matInput" im Eingabefeld wurde das Problem behoben. In Ihrem Fall wird "matinput" angezeigt, und meine App löst denselben Fehler aus.

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

Geben Sie hier die Bildbeschreibung ein

"matInput"

Geben Sie hier die Bildbeschreibung ein

ReturnTable
quelle
hmm nicht sicher, du hast die generierte Ausgabe eingefügt. Im realen Code ist es bereits matInput, wenn Sie "Textbox-Abschnitt" sehen. Ich habe keine Probleme damit, dass es funktioniert, wenn ich nur Material verwende. Wenn ich versuche, meine eigene Komponente mit Projektion zu erstellen, funktioniert es nicht mehr. Mein Plunker scheint Probleme zu haben, hoffentlich wird er sich tagsüber von selbst beheben.
Viktor Eriksson
Oh ich verstehe, mein schlechtes. Das war sowieso ein langer Schuss. Ich werde folgen, um zu sehen, ob jemand tatsächlich den richtigen Neigungswinkel finden kann. Ich bin neugierig auf dieses Problem.
ReturnTable
2
Es geschah mit mir, ich habe zu ändern vergessen mdInputzu matInput.
Ebraheem Alrabee '26.
2
Winkel 5: Das <input> -Tag-Attribut sollte matInputanstelle von sein mat-input.
Stavm
5

Wenn jemand nach dem Versuch, a zu nisten <mat-checkbox>, mit diesem Fehler feststeckte , sei guten Mutes! Es funktioniert nicht innerhalb eines <mat-form-field>Tags.

Mina
quelle
5

Wenn jemand versucht, ein <mat-radio-group>Inneres <mat-form-field> wie unten zu verschachteln , wird dieser Fehler angezeigt

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

Entfernen Sie die übergeordneten <mat-form-field>Tags

Steve Sonius
quelle
Ich hatte dieses Problem und hatte einen Ausschnitt aus Markups mit solchen Dingen. Durch das Entfernen des mat-form-fieldwurde das Problem für mich behoben.
Andrew Gray
Gibt es einen Grund, <mat-form-field>der die darin enthaltene Funkgruppe nicht unterstützt? Ich hatte auch dieses Problem und dachte nicht daran, nur die Feldtags der Mattenform zu entfernen, da es nicht so schien, als wäre es das Richtige, da so viele Beispiele für UI-Formulare verwendet werden <mat-form-field>. Ich habe alle verschiedenen Materialformulareingabemodule für Formulare, wähle Dropdowns und Radiogruppen aus, die in meiner app.module.ts definiert sind, wie viele der anderen Antwortreferenzen.
Alex
Ich kann es nicht glauben ... ich versuche alles und nichts zu arbeiten ... und nach ein paar Tagen voller Schmerzen fand ich diese so einfache Lösung ... danke Kumpel
Arter
3

Ich hatte auch dieses Problem und ich habe ein <mat-select>Element in meiner Vorlage. Wenn ich das MatSelectModule in das Modul importiere, funktioniert es, es macht keine Wissenschaft, aber ich hoffe, es kann Ihnen helfen.

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>
user9001817
quelle
Es funktioniert so, als ob das Mat-Form-Field-Steuerelement ohne Import des Moduls nicht versteht, was eine Mat-Auswahl ist. Beim Importieren können alle Informationen korrigiert und die Vorlage ohne weitere Fehler analysiert werden.
PeterS
2

Leider kann ich einige bereits gute Antworten nicht einfach kommentieren, da ich noch keine SO-Punkte habe. Es gibt jedoch drei Schlüsselmodule, die Sie benötigen, um sicherzustellen, dass Sie in das übergeordnete Modul Ihrer Komponente importieren Sie müssen direkt in Ihre Komponente importieren. Ich wollte sie kurz teilen und hervorheben, was sie tun.

  1. MatInputModule
  2. MatFormFieldModule
  3. ReactiveFormsModule

Die ersten beiden sind für Winkelmaterial. Viele Leute, die Angular Material noch nicht kennen, werden instinktiv auf eines davon stoßen und nicht erkennen, dass das Erstellen einer Form beides erfordert.

Was ist der Unterschied zwischen ihnen?

MatFormFieldModule umfasst alle Arten von Formularfeldern, die Angular Material zur Verfügung hat. Dies ist eher ein übergeordnetes Modul für Formularfelder im Allgemeinen, während das MatInputModule im Gegensatz zu Auswahlfeldern, Optionsfeldern usw. speziell für Eingabefeldtypen vorgesehen ist.

Der dritte Punkt in der obigen Liste ist Angulars Reactive Forms Module. Das Reactive Forms Module ist verantwortlich für eine Menge Angular Love unter der Haube. Wenn Sie mit Angular arbeiten möchten, empfehle ich Ihnen dringend, einige Zeit mit dem Lesen von Angular Docs zu verbringen. Sie haben alle Ihre Antworten. Das Erstellen von Anwendungen umfasst selten keine Formulare, und in den meisten Fällen umfasst Ihre Anwendung reaktive Formulare. Nehmen Sie sich deshalb bitte die Zeit, diese beiden Seiten zu lesen.

Angular Docs: Reaktive Formen

Angular Docs: Modul für reaktive Formulare

Das erste Dokument 'Reaktive Formen' ist Ihre mächtigste Waffe, wenn Sie anfangen, und das zweite Dokument wird Ihre stärkste Waffe sein, wenn Sie sich mit fortgeschritteneren Anwendungen von Angular Reactive Forms befassen.

Denken Sie daran, dass diese direkt in das Modul Ihrer Komponente importiert werden müssen, nicht in die Komponente, in der Sie sie verwenden. Wenn ich mich richtig erinnere, haben wir in Angular 2 den gesamten Satz von Angular Material-Modulen in unser Haupt-App-Modul importiert und dann was importiert Wir brauchten in jeder unserer Komponenten direkt. Die derzeitige Methode ist IMO viel effizienter, da wir garantiert den gesamten Satz von Angular Material-Modulen importieren, wenn wir nur einige davon verwenden.

Ich hoffe, dies bietet ein bisschen mehr Einblick in das Erstellen von Formen mit Angular Material.

ein anderer Codierer
quelle
2

Wenn alle oben genannten Antworten auf die Hauptcodestruktur / -konfiguration Ihr Problem nicht lösen, sollten Sie Folgendes überprüfen: Stellen Sie sicher, dass Sie Ihr Problem in keiner Weise ungültig gemacht haben <input> Tag .

Zum Beispiel erhielt ich die gleiche mat-form-field must contain a MatFormFieldControlFehlermeldung, nachdem ich versehentlich ein requiredAttribut nach einem selbstschließenden Schrägstrich eingefügt hatte /, wodurch mein Attribut effektiv ungültig wurde <input/>. Mit anderen Worten, ich habe dies getan (siehe das Ende der Eingabe-Tag-Attribute):

falsch :

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

rechts :

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

Wenn Sie diesen Fehler oder etwas anderes machen, um Ihre zu ungültig zu machen <input>, können Sie den mat-form-field must contain a MatFormFieldControlFehler erhalten. Auf jeden Fall ist dies nur eine weitere Sache, auf die Sie beim Debuggen achten müssen.

cjn
quelle
2

Der gleiche Fehler kann auftreten, wenn Sie eine Mattenrutsche innerhalb einer Matte aus dem Feld als einziges Element in meinem Fall haben

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

Dies kann passieren, wenn Sie mehrere Attribute in der <mat-form-field> einfachen Lösung hatten, indem Sie den Folienschalter zum Stamm verschieben

Kisinga
quelle
1
Das hat mir das Leben gerettet. Vielen Dank.
Paulo Pedroso
1

Sie können versuchen, diesem Handbuch zu folgen und Ihr eigenes MatFormFieldControl zu implementieren / bereitzustellen

rivanov
quelle
1

Ich hatte versehentlich die matInput- Direktive aus dem Eingabefeld entfernt, was den gleichen Fehler verursachte.

z.B.

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

fester Code

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

MatRadioModule funktioniert in MatFormField nicht. Die Dokumente sagen

Dieser Fehler tritt auf, wenn Sie Ihrem Formularfeld kein Formularfeldsteuerelement hinzugefügt haben. Wenn Ihr Formularfeld eine native oder ein Element enthält, stellen Sie sicher, dass Sie die Anweisung matInput hinzugefügt und MatInputModule importiert haben. Weitere Komponenten, die als Formularfeldsteuerelement fungieren können, sind <mat-select>, <mat-chip-list> und alle von Ihnen erstellten benutzerdefinierten Formularfeldsteuerelemente.

intecho
quelle
1

In meinem Fall wurde eine meiner schließenden Klammern für "onChanges ()" im Eingabeelement übersehen, und daher wurde das Eingabeelement anscheinend überhaupt nicht gerendert:

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

Eine Teillösung besteht darin, das Materialformularfeld in eine benutzerdefinierte Komponente zu verpacken und die ControlValueAccessorSchnittstelle darauf zu implementieren . Abgesehen von der Inhaltsprojektion ist der Effekt ziemlich gleich.

Siehe vollständiges Beispiel zu Stackblitz.

Ich habe innen FormControl( reaktive Formen ) CustomInputComponentaber FormGroupoder verwendetFormArray sollte auch funktionieren , wenn Sie eine komplexere Form Element benötigen.

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>
csg
quelle
1

Sie haben die matInput Direktive in Ihrem Eingabe-Tag verpasst .

Isaac Pitwa
quelle
1

Sie müssen das MatInputModule in Ihre Datei app.module.ts importieren

{MatInputModule} aus '@ angle / material' importieren;

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
  ],
Shashwat Gupta
quelle
1

Sie können das Erscheinungsbild = "Füllen" in Ihrem Mat-Form-Feld-Tag festlegen, es funktioniert für mich

<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>
Pawan Singare
quelle
Dies hat mein Problem behoben. Können Sie bitte erklären, was appearence = "fill"hier vor sich geht
IamGrooot vor
1

Winkel 9+ ... Material 9+

Ich habe festgestellt, dass 3 Fehler denselben Fehler verursachen können:

  1. Stellen Sie sicher, dass Sie MatFormFieldModule und MatInputModule in app.module oder module.ts importiert haben, in die Ihre Komponenten importiert werden (bei verschachtelten Modulen).
  2. Wenn Sie Materialschaltflächen oder Kontrollkästchen in das Feld Mattenform einschließen. Siehe die Liste der Materialkomponenten, die mit mat-form-field mat-form-field umwickelt werden können
  3. Wenn Sie matInput nicht in Ihr Tag aufnehmen können. dh <input matInput type = "number" step = "0.01" formControlName = "price" />
7guyo
quelle
0

In meinem Fall habe ich Folgendes geändert:

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

dazu:

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

Das Hinzufügen der matInput-Direktive zum Eingabe-Tag hat diesen Fehler für mich behoben.

Gilmourguru
quelle
0

Möglicherweise haben Sie den Import von MatInputModule verpasst

Pranith Baggan
quelle
0

Hinweis Irgendwann tritt ein Fehler auf, wenn wir das Tag "mat-form-field" um die Schaltfläche "Senden" verwenden, wie z.

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

Verwenden Sie dieses Tag also nicht um die Schaltfläche "Senden"

M Abdullah
quelle
0

Verwenden Sie Anbieter in der Datei component.ts

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

Der neue aktualisierte Import des MatInput-Moduls lautet:

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

Gemäß Angular Materials API

SaiSurya
quelle
-1

Ich hatte das gleiche Problem

Problem ist einfach

Nur Sie müssen zwei Module in Ihr Projekt importieren

MatFormFieldModule MatInputModule

Fatih Çakıroğlu
quelle
-1

Ich bekam das gleiche Problem aufgrund des kommentierten Elements wie folgt.

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

Formularfeld sollte Element haben! (zB Eingabe, Textbereich, Auswahl usw.)

U_R_Naveen UR_Naveen
quelle