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
angular
angular-material2
Viktor Eriksson
quelle
quelle
Antworten:
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.
quelle
MatInputModule
importiert 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.<mat-form-field>
Tags müssen Sie sicherstellen, dass Sie korrektmatInput
Attribut auf jedeminput
Tag odermatNativeControl
Attribut auf jedem<select>
Ich hatte dieses Problem. Ich habe
MatFormFieldModule
an meinem Hauptmodul importiert , aber vergessenMatInputModule
, demimports
Array Folgendes hinzuzufügen :Ich hoffe es hilft.
Mehr Infos hier .
quelle
<mat-form-field>
Tags müssen Sie sicherstellen, dass Sie korrektmatInput
Attribut auf jedeminput
Tag odermatNativeControl
Attribut auf jedem<select>
Tagimport { MatInputModule } from '@angular/material/input':
Lösung 1 - Importieren Sie MatInputModule
Import
MatInputModule
innerhalb des Moduls dhapp.module.ts
Lösung 2 - Rechtschreibfehler
Stellen Sie sicher, dass Sie hinzufügen,
matInput
und es wird zwischen Groß- und Kleinschreibung unterschieden.quelle
Zitat aus der offiziellen Dokumentation hier :
quelle
Dies kann auch passieren, wenn Sie eine korrekte Eingabe in einem Mat-Form-Feld haben , aber eine darauf hat
ngIf
. Z.B:In meinem Fall
mat-chip-list
soll "erst erscheinen", nachdem seine Daten geladen wurden. Die Validierung wird jedoch durchgeführt undmat-form-field
beschwert sich beiUm das Problem zu beheben, muss das Steuerelement vorhanden sein, daher habe ich Folgendes verwendet
[hidden]
:Eine alternative Lösung wird vorgeschlagen von
Mosta
: move * ngIf fürmat-form-field
:quelle
quelle
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.
"matinput"
"matInput"
quelle
mdInput
zumatInput
.matInput
anstelle von seinmat-input
.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.quelle
Wenn jemand versucht, ein
<mat-radio-group>
Inneres<mat-form-field>
wie unten zu verschachteln , wird dieser Fehler angezeigtEntfernen Sie die übergeordneten
<mat-form-field>
Tagsquelle
mat-form-field
wurde das Problem für mich behoben.<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.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.quelle
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.
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.
quelle
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 MatFormFieldControl
Fehlermeldung, nachdem ich versehentlich einrequired
Attribut 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 :
rechts :
Wenn Sie diesen Fehler oder etwas anderes machen, um Ihre zu ungültig zu machen
<input>
, können Sie denmat-form-field must contain a MatFormFieldControl
Fehler erhalten. Auf jeden Fall ist dies nur eine weitere Sache, auf die Sie beim Debuggen achten müssen.quelle
Der gleiche Fehler kann auftreten, wenn Sie eine Mattenrutsche innerhalb einer Matte aus dem Feld als einziges Element in meinem Fall haben
Dies kann passieren, wenn Sie mehrere Attribute in der
<mat-form-field>
einfachen Lösung hatten, indem Sie den Folienschalter zum Stamm verschiebenquelle
Sie können versuchen, diesem Handbuch zu folgen und Ihr eigenes MatFormFieldControl zu implementieren / bereitzustellen
quelle
Ich hatte versehentlich die matInput- Direktive aus dem Eingabefeld entfernt, was den gleichen Fehler verursachte.
z.B.
fester Code
quelle
MatRadioModule funktioniert in MatFormField nicht. Die Dokumente sagen
quelle
In meinem Fall wurde eine meiner schließenden Klammern für "onChanges ()" im Eingabeelement übersehen, und daher wurde das Eingabeelement anscheinend überhaupt nicht gerendert:
quelle
Eine Teillösung besteht darin, das Materialformularfeld in eine benutzerdefinierte Komponente zu verpacken und die
ControlValueAccessor
Schnittstelle darauf zu implementieren . Abgesehen von der Inhaltsprojektion ist der Effekt ziemlich gleich.Siehe vollständiges Beispiel zu Stackblitz.
Ich habe innen
FormControl
( reaktive Formen )CustomInputComponent
aberFormGroup
oder verwendetFormArray
sollte auch funktionieren , wenn Sie eine komplexere Form Element benötigen.app.component.html
custom-input.component.html
quelle
Sie haben die
matInput
Direktive in Ihrem Eingabe-Tag verpasst .quelle
quelle
Sie können das Erscheinungsbild = "Füllen" in Ihrem Mat-Form-Feld-Tag festlegen, es funktioniert für mich
quelle
appearence = "fill"
hier vor sich gehtWinkel 9+ ... Material 9+
Ich habe festgestellt, dass 3 Fehler denselben Fehler verursachen können:
quelle
In meinem Fall habe ich Folgendes geändert:
dazu:
Das Hinzufügen der matInput-Direktive zum Eingabe-Tag hat diesen Fehler für mich behoben.
quelle
Möglicherweise haben Sie den Import von MatInputModule verpasst
quelle
Hinweis Irgendwann tritt ein Fehler auf, wenn wir das Tag "mat-form-field" um die Schaltfläche "Senden" verwenden, wie z.
Verwenden Sie dieses Tag also nicht um die Schaltfläche "Senden"
quelle
Verwenden Sie Anbieter in der Datei component.ts
quelle
Der neue aktualisierte Import des MatInput-Moduls lautet:
Gemäß Angular Materials API
quelle
Ich hatte das gleiche Problem
Problem ist einfach
Nur Sie müssen zwei Module in Ihr Projekt importieren
MatFormFieldModule MatInputModule
quelle
Ich bekam das gleiche Problem aufgrund des kommentierten Elements wie folgt.
Formularfeld sollte Element haben! (zB Eingabe, Textbereich, Auswahl usw.)
quelle