W naszej firmie staramy się budować własne komponenty form-field. Próbujemy owinąć komponenty Material Design w ten sposób:
pole:
<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>
pole tekstowe:
<field hint="hint">
<input matInput
[placeholder]="placeholder"
[value]="value"
(change)="onChange($event)"
(keydown)="onKeydown($event)"
(keyup)="onKeyup($event)"
(keypress)="onKeypress($event)">
</field>
Stosowanie:
<textbox value="test" hint="my hint"></textbox>
Powoduje to w przybliżeniu to:
<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>
Ale otrzymuję komunikat „mat-form-field musi zawierać MatFormFieldControl” w konsoli. Myślę, że ma to związek z mat-form-field, które nie zawiera bezpośrednio pola matInput. Ale zawiera to, jest po prostu z projekcją zawartości ng.
Oto blitz: https://stackblitz.com/edit/angular-xpvwzf
angular
angular-material2
Viktor Eriksson
źródło
źródło
Odpowiedzi:
Niestety projekcja treści do pola mat-form-field nie jest jeszcze obsługiwana. Śledź następujący problem na githubie, aby otrzymywać najnowsze informacje na jego temat.
Obecnie jedynym rozwiązaniem dla Ciebie jest umieszczenie treści bezpośrednio w komponencie mat-form-field lub zaimplementowanie klasy MatFormFieldControl, tworząc w ten sposób niestandardowy komponent pola formularza.
źródło
MatInputModule
musi być importowany rozwiązać mój problem. Ponieważ jest to zaakceptowana odpowiedź, dodaję tutaj link, mając nadzieję, że pozwoli to zaoszczędzić czas innych.<mat-form-field>
tagu musisz upewnić się, że poprawnie dodałeśmatInput
atrybut do każdegoinput
tagu lubmatNativeControl
atrybut lub na każdym<select>
Miałem ten problem. Zaimportowałem
MatFormFieldModule
w moim głównym module, ale zapomniałem dodaćMatInputModule
doimports
tablicy, na przykład:Mam nadzieję, że to pomoże.
Więcej informacji tutaj .
źródło
<mat-form-field>
tagu musisz upewnić się, że poprawnie dodałeśmatInput
atrybut na każdyminput
tagu lubmatNativeControl
atrybut lub na każdym<select>
taguimport { MatInputModule } from '@angular/material/input':
Rozwiązanie 1 - zaimportuj MatInputModule
import
MatInputModule
wewnątrz modułu tjapp.module.ts
Kątowy 9+
Poniżej kątowego 9
Rozwiązanie 2 - Błędy w pisowni
Pamiętaj, aby dodać
matInput
i uwzględniać wielkość liter.źródło
Cytując z oficjalnej dokumentacji tutaj :
źródło
Może się to również zdarzyć, jeśli masz prawidłowe dane wejściowe w polu mat-form-field , ale ma
ngIf
na nim znak . Na przykład:W moim przypadku
mat-chip-list
ma „pojawić się” dopiero po załadowaniu danych. Jednak walidacja jest wykonywana imat-form-field
narzekaAby to naprawić, kontrolka musi tam być, więc użyłem
[hidden]
:Alternatywne rozwiązanie to
Mosta
: move * ngIf dlamat-form-field
:źródło
źródło
Nie jestem pewien, czy to może być takie proste, ale miałem ten sam problem, zmiana „mat-input” na „matInput” w polu wejściowym rozwiązała problem. W Twoim przypadku widzę „matinput” i powoduje to, że moja aplikacja zgłasza ten sam błąd.
„matinput”
„matInput”
źródło
mdInput
namatInput
.matInput
zamiastmat-input
.Jeśli ktoś utknął w tym błędzie po próbie zagnieżdżenia
<mat-checkbox>
, bądź dobrej myśli! Nie działa wewnątrz<mat-form-field>
tagu.źródło
jeśli ktoś próbuje zagnieździć
<mat-radio-group>
wewnątrz<mat-form-field>
podobnego poniżej, pojawi się ten błądusuń
<mat-form-field>
tagi nadrzędneźródło
mat-form-field
problemu spowodowało, że problem zniknął.<mat-form-field>
który nie obsługuje wewnątrz grupy radiowej? Miałem również ten problem i nie pomyślałem o usunięciu tagów pól formularza mat, ponieważ nie wydawało się, że byłoby to właściwe, ponieważ używa się tak wielu przykładów formularzy interfejsu użytkownika<mat-form-field>
. Mam wszystkie różne moduły wejściowe formularzy materiałów dla formularzy, wybierz listy rozwijane i grupy radiowe zdefiniowane w moim app.module.ts, podobnie jak wiele innych odpowiedzi.Miałem też ten problem i mam
<mat-select>
element w moim szablonie, kiedy importuję MatSelectModule do Module, działa, nie tworzy nauki, ale mam nadzieję, że może ci pomóc.źródło
Niestety nie mogę po prostu skomentować niektórych już dobrych odpowiedzi, ponieważ nie mam jeszcze punktów SO, jednak są 3 kluczowe moduły, które musisz upewnić się, że importujesz do modułu nadrzędnego swojego komponentu, poza tym, co musisz importować bezpośrednio do swojego komponentu. Chciałem się nimi krótko podzielić i podkreślić, czym się zajmują.
Pierwsze dwa dotyczą materiału kątowego. Wiele osób, które dopiero zaczynają przygodę z Angular Material, instynktownie natrafią na jeden z nich i nie zdają sobie sprawy, że budowanie formy wymaga obu.
Więc jaka jest różnica między nimi?
MatFormFieldModule obejmuje wszystkie różne typy pól formularzy dostępnych w programie Angular Material. Jest to bardziej moduł wysokiego poziomu dla pól formularzy w ogóle, podczas gdy MatInputModule jest przeznaczony specjalnie dla typów pól `` wejściowych '', w przeciwieństwie do pól wyboru, przycisków opcji itp.
Trzecią pozycją na powyższej liście jest moduł formularzy reaktywnych Angulara. Moduł Reactive Forms jest odpowiedzialny za mnóstwo ukrytej miłości Angular. Jeśli zamierzasz pracować z Angularem, gorąco polecam spędzenie czasu na przeczytaniu Angular Docs. Mają wszystkie twoje odpowiedzi. Tworzenie aplikacji rzadko NIE obejmuje formularzy, a częściej niż nie, Twoja aplikacja będzie obejmować formularze reaktywne. Z tego powodu prosimy o poświęcenie czasu na przeczytanie tych dwóch stron.
Angular Docs: Reactive Forms
Angular Docs: Moduł Reactive Forms
Pierwszy dokument „Reactive Forms” będzie twoją najpotężniejszą bronią na początku, a drugi dokument będzie twoją najpotężniejszą bronią, gdy przejdziesz do bardziej zaawansowanych zastosowań Angular Reactive Forms.
Pamiętaj, że muszą one zostać zaimportowane bezpośrednio do modułu twojego komponentu, a nie komponentu, w którym ich używasz. Jeśli dobrze pamiętam, w Angular 2 zaimportowaliśmy cały zestaw modułów Angular Material w naszym głównym module aplikacji, a następnie zaimportowaliśmy to, co potrzebowaliśmy w każdym z naszych komponentów bezpośrednio. Obecna metoda jest znacznie wydajniejsza IMO, ponieważ mamy gwarancję zaimportowania całego zestawu modułów Angular Material, jeśli wykorzystamy tylko kilka z nich.
Mam nadzieję, że zapewni to trochę więcej informacji na temat budowania form za pomocą Angular Material.
źródło
Jeśli wszystkie powyższe odpowiedzi dotyczące głównej struktury kodu / konfiguracji nie rozwiązują Twojego problemu, oto jeszcze jedna rzecz do sprawdzenia: upewnij się, że w żaden sposób nie unieważniłeś swojego
<input>
tag .Na przykład otrzymałem ten sam
mat-form-field must contain a MatFormFieldControl
komunikat o błędzie po przypadkowym umieszczeniurequired
atrybutu po samozamykającym się ukośniku/
, który skutecznie unieważnił mój<input/>
. Innymi słowy, zrobiłem to (zobacz koniec atrybutów znacznika wejściowego):źle :
prawo :
Jeśli popełnisz ten błąd lub coś innego, aby unieważnić swój
<input>
, możesz otrzymaćmat-form-field must contain a MatFormFieldControl
błąd. W każdym razie jest to jeszcze jedna rzecz, na którą należy zwrócić uwagę podczas debugowania.źródło
Ten sam błąd może wystąpić, jeśli masz matę ślizgową w macie z pola jako jedyny element w moim przypadku, jaki miałem
Może się tak zdarzyć, jeśli masz kilka atrybutów w
<mat-form-field>
prostym rozwiązaniu, aby przesunąć przełącznik suwaka do katalogu głównegoźródło
Możesz spróbować postępować zgodnie z tym przewodnikiem i zaimplementować / udostępnić własny MatFormFieldControl
źródło
Przypadkowo usunąłem dyrektywę matInput z pola wejściowego, co spowodowało ten sam błąd.
na przykład.
poprawiony kod
źródło
MatRadioModule nie będzie działać wewnątrz MatFormField. W docs powiedzieć
źródło
W moim przypadku jeden z moich nawiasów zamykających dla „onChanges ()” został pominięty w elemencie wejściowym, a zatem element wejściowy najwyraźniej w ogóle nie był renderowany:
źródło
Częściowym rozwiązaniem jest owinięcie pola formularza materiału w niestandardowy komponent i zaimplementowanie na nim
ControlValueAccessor
interfejsu. Oprócz projekcji treści efekt jest prawie taki sam.Zobacz pełny przykład na Stackblitz.
Użyłem
FormControl
( formularzy reaktywnych ) wewnątrz,CustomInputComponent
aleFormGroup
lubFormArray
powinienem też działać, jeśli potrzebujesz bardziej złożonego elementu formularza.app.component.html
custom-input.component.html
źródło
Brakuje
matInput
dyrektywy w tagu wejściowym.źródło
źródło
Możesz ustawić look = "fill" wewnątrz tagu mat-form-field, to działa dla mnie
źródło
appearence = "fill"
tu robiKątowe 9+ ... Materiał 9+
Zauważyłem, że 3 błędy mogą powodować ten sam błąd:
źródło
W moim przypadku zmieniłem to:
do tego:
Dodanie dyrektywy matInput do tagu input naprawiło ten błąd.
źródło
Mogłeś przegapić import MatInputModule
źródło
użyj dostawców w pliku component.ts
źródło
Nowy zaktualizowany import modułu MatInput to:
Zgodnie z API Angular Materials
źródło
Uwaga Czasami pojawia się błąd, gdy używamy tagu „mat-form-field” wokół przycisku wysyłania, np .:
Więc uprzejmie nie używaj tego tagu wokół przycisku przesyłania
źródło
Miałem ten sam problem
sprawa jest prosta
tylko musisz zaimportować dwa moduły do swojego projektu
MatFormFieldModule MatInputModule
źródło
Otrzymałem ten sam problem z powodu komentowanego elementu w następujący sposób.
pole formularza powinno mieć element! (np. wejście, obszar tekstu, wybór itp.)
źródło