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

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.

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 .

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

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.

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>

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



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

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"

"matInput"

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.

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

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>

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.

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.

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

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

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>

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.

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

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>

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

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

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>

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

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.

Möglicherweise haben Sie den Import von MatInputModule verpasst

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"

Verwenden Sie Anbieter in der Datei component.ts

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

Der neue aktualisierte Import des MatInput-Moduls lautet:

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

Gemäß Angular Materials API

Ich hatte das gleiche Problem

Problem ist einfach

Nur Sie müssen zwei Module in Ihr Projekt importieren

MatFormFieldModule MatInputModule

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