mat-form-field musi zawierać MatFormFieldControl

187

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

Viktor Eriksson
źródło
3
Czy kiedykolwiek rozwiązałeś ten problem? Mam dokładnie ten sam problem. Odpowiedzi nie są istotne.
numsu
Nie, niestety nie :/. Znalazłem to: github.com/angular/material2/issues/9411 i jeśli dobrze to rozumiem, jest to nieobsługiwany bankomat.
Viktor Eriksson
Ok .. Dzięki, skończyło się na stworzeniu komponentu, który po prostu zawija wszystkie wskazówki i walidacje i umieściłem go pod elementem wejściowym.
numsu
@ViktorEriksson Jeśli moja odpowiedź była dla Ciebie przydatna, czy zechcesz ją przyjąć?
darksoulsong
1
Przykro mi, ale to nie było przydatne, moje pytanie ma niewiele wspólnego z tą odpowiedzią.
Viktor Eriksson,

Odpowiedzi:

28

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.

n.yakovenko
źródło
131
Natknąłem się na to pytanie, szukając w Google komunikatu o błędzie. Odpowiedź poniżej , stwierdzając, że MatInputModulemusi 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.
CGFoX
3
Mój problem polegał na tym, że zapomniałem zaimportować „ FormsModule ”. Mam nadzieję, że to komuś pomoże.
lerenau
@CGFoX Masz absolutną rację stary !! importowanie MatInputModule rozwiązało mój problem!
Rafique Mohammed
5
Również wewnątrz <mat-form-field>tagu musisz upewnić się, że poprawnie dodałeś matInputatrybut do każdego inputtagu lub matNativeControlatrybut lub na każdym<select>
svassr.
1
@CGFoX Chciałbym, aby zaktualizowali dokumentację o te informacje i lepsze przykłady ...
410

Miałem ten problem. Zaimportowałem MatFormFieldModulew moim głównym module, ale zapomniałem dodać MatInputModuledo importstablicy, na przykład:

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

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

Mam nadzieję, że to pomoże.

Więcej informacji tutaj .

mroczna pieśń
źródło
9
Również wewnątrz <mat-form-field>tagu musisz upewnić się, że poprawnie dodałeś matInputatrybut na każdym inputtagu lub matNativeControlatrybut lub na każdym <select>tagu
svassr
Dziękuję Ci. Rozwiązał mój problem. Jestem nowy w Angular Material. Wygląda na to, że muszę zaimportować wiele, wiele modułów, aby używać Angular Material. Na przykład, musimy zaimportować „MatButtonModule”, aby używać przycisków, „MatCheckboxModule”, aby używać pól wyboru, „MatFormFieldModule”, aby używać formularzy, „MatInputModule”, aby używać danych wejściowych ... To naprawdę męczące. Czy jest sposób, aby zaimportować tylko raz lub dwa razy, a potem moglibyśmy bez obaw zacząć używać Angular Material?
William Hou
1
WAŻNE: porządek ma znaczenie!
Becario Senior
nie działa dla mnie, właśnie użyłem tego przykładu: material.angular.io/components/stepper/overview
tatsu
To zadziałało dla mnie import { MatInputModule } from '@angular/material/input':
Jared Whipple
85

Rozwiązanie 1 - zaimportuj MatInputModule

import MatInputModule wewnątrz modułu tjapp.module.ts

Kątowy 9+

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

Poniżej kątowego 9

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

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

Rozwiązanie 2 - Błędy w pisowni

Pamiętaj, aby dodać matInputi uwzględniać wielkość liter.

<input matInput type="text" />
WasiF
źródło
2
Ach, to doprowadzało mnie do szału. Powód pierwszy zadziałał dla mnie. Wydaje mi się, że powinno to zostać określone w dokumentacji, chociaż wydaje się to teraz oczywiste.
Feign
Napotkałem ten problem, gdy w instrukcji wejściowej brakowało „matInput”.
HadidAli
17

Cytując z oficjalnej dokumentacji tutaj :

Błąd: pole-formularza-mat musi zawierać element MatFormFieldControl

Ten błąd występuje, gdy nie dodano formantu pola formularza do pola formularza. Jeśli twoje pole formularza zawiera natywny lub element, upewnij się, że dodałeś do niego dyrektywę matInput i zaimportowałeś MatInputModule. Inne składniki, które mogą pełnić rolę kontrolki pól formularza, obejmują, i wszelkie utworzone niestandardowe kontrolki pól formularza.

user158
źródło
14

Może się to również zdarzyć, jeśli masz prawidłowe dane wejściowe w polu mat-form-field , ale ma ngIfna nim znak . Na przykład:

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

W moim przypadku mat-chip-listma „pojawić się” dopiero po załadowaniu danych. Jednak walidacja jest wykonywana i mat-form-fieldnarzeka

mat-form-field musi zawierać MatFormFieldControl

Aby to naprawić, kontrolka musi tam być, więc użyłem [hidden]:

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

Alternatywne rozwiązanie to Mosta: move * ngIf dla mat-form-field:

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>
Alexei
źródło
Właśnie miałem podobny problem, naprawiłem go czymś podobnym do tego, co mówisz. Masz moje poparcie!
Alex
3
Dzięki, zamiast używać ukrytego, możesz przenieść warunek ngIf na cały tag mat-form-field
Mosta
9
import {MatInputModule} from '@angular/material/input';



@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})
Ib Abayomi Alli
źródło
3
Witamy w stackoverflow. Odpowiadając na pytania, dodaj wyjaśnienie, co robi twój fragment kodu i dlaczego rozwiązuje pytanie OP. Aby uzyskać więcej informacji, sprawdź tutaj Jak odpowiedzieć
Djensen
6

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.

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

wprowadź opis obrazu tutaj

„matInput”

wprowadź opis obrazu tutaj

ReturnTable
źródło
hmm nie jestem pewien, wklejono wygenerowane wyjście. W prawdziwym kodzie jest to już matInput, jeśli widzisz „sekcję pola tekstowego”. Nie mam problemów z uruchomieniem tego samego materiału, przestaje działać, gdy próbuję stworzyć własny komponent z projekcją. Wydaje się, że mój plunker ma problemy z bankomatem, mam nadzieję, że naprawi się sam w ciągu dnia.
Viktor Eriksson,
Och, rozumiem, moja wina. To i tak była długa szansa. Pójdę dalej, aby sprawdzić, czy ktoś może rzeczywiście wymyślić właściwy kąt pochylenia. Jestem ciekawy tego problemu.
ReturnTable
2
Stało się to ze mną, zapomniałem się do zmian mdInputna matInput.
Ebraheem Alrabee '26
2
Kątowy 5: atrybut znacznika <input> powinien być matInputzamiast mat-input.
Stavm
6

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.

Mina
źródło
6

jeśli ktoś próbuje zagnieździć <mat-radio-group>wewnątrz <mat-form-field> podobnego poniżej, pojawi się ten błąd

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

usuń <mat-form-field>tagi nadrzędne

steve sonius
źródło
Miałem ten problem i miałem fragment kodu z tego rodzaju rzeczami. Usunięcie mat-form-fieldproblemu spowodowało, że problem zniknął.
Andrew Gray,
Czy jest jakiś powód, <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.
Alex
Nie mogę uwierzyć .... Próbuję wszystkiego i nic nie działa .... i po kilku dniach bólu znalazłem to takie proste rozwiązanie ... dziękuję kolego
Arter
4

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.

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
źródło
Działa tak, jakby bez importowania modułu formant mat-form-field nie rozumiał, czym jest mat-select. Po zaimportowaniu może naprawić wszystkie informacje i dlatego może przeanalizować szablon bez dalszych błędów.
PeterS
3

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

  1. MatInputModule
  2. MatFormFieldModule
  3. ReactiveFormsModule

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.

inny koder
źródło
3

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 MatFormFieldControlkomunikat o błędzie po przypadkowym umieszczeniu requiredatrybutu 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 :

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

prawo :

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

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 MatFormFieldControlbłąd. W każdym razie jest to jeszcze jedna rzecz, na którą należy zwrócić uwagę podczas debugowania.

cjn
źródło
3

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

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

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

Kisinga
źródło
1
To uratowało mi życie. Dzięki.
Paulo Pedroso
2

Możesz spróbować postępować zgodnie z tym przewodnikiem i zaimplementować / udostępnić własny MatFormFieldControl

rivanov
źródło
2

Przypadkowo usunąłem dyrektywę matInput z pola wejściowego, co spowodowało ten sam błąd.

na przykład.

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

poprawiony kod

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>
Franklin Pious
źródło
2

MatRadioModule nie będzie działać wewnątrz MatFormField. W docs powiedzieć

Ten błąd występuje, gdy nie dodano kontrolki pola formularza do pola formularza. Jeśli twoje pole formularza zawiera natywny lub element, upewnij się, że dodałeś do niego dyrektywę matInput i zaimportowałeś MatInputModule. Inne składniki, które mogą pełnić rolę kontrolek pól formularza, to <mat-select>, <mat-chip-list> i wszelkie utworzone przez Ciebie niestandardowe kontrolki pól formularza.

intotecho
źródło
2

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:

<input mat-menu-item 
      matInput type="text" 
      [formControl]="myFormControl"
      (ngModelChange)="onChanged()>
java-addict301
źródło
2

Częściowym rozwiązaniem jest owinięcie pola formularza materiału w niestandardowy komponent i zaimplementowanie na nim ControlValueAccessorinterfejsu. 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, CustomInputComponentale FormGrouplub FormArraypowinienem też działać, jeśli potrzebujesz bardziej złożonego elementu formularza.

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
źródło
2

Brakuje matInput dyrektywy w tagu wejściowym.

Isaac Pitwa
źródło
2

Musisz zaimportować MatInputModule do pliku app.module.ts

importuj {MatInputModule} z '@ 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
  ],
Shashwat Gupta
źródło
2

Możesz ustawić look = "fill" wewnątrz tagu mat-form-field, to działa dla mnie

<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
źródło
To rozwiązało mój problem. Czy możesz wyjaśnić, co appearence = "fill"tu robi
IamGrooot
2

Kątowe 9+ ... Materiał 9+

Zauważyłem, że 3 błędy mogą powodować ten sam błąd:

  1. Upewnij się, że zaimportowałeś MatFormFieldModule i MatInputModule w app.module lub module.ts, do którego są importowane komponenty (w przypadku modułów zagnieżdżonych)
  2. Podczas owijania przycisków materiału lub pola wyboru w polu mat-form. Zobacz listę komponentów materiałów, które mogą być opakowane za pomocą mat-form-field mat-form-field
  3. Gdy nie umieścisz matInput w swoim tagu. tj. <dane wejściowe matInput type = "number" step = "0.01" formControlName = "price" />
7guyo
źródło
1

W moim przypadku zmieniłem to:

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

do tego:

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

Dodanie dyrektywy matInput do tagu input naprawiło ten błąd.

Gilmourguru
źródło
1

Mogłeś przegapić import MatInputModule

Pranith Baggan
źródło
1

użyj dostawców w pliku component.ts

@Component({
 selector: 'your-selector',
 templateUrl: 'template.html',
 styleUrls: ['style.css'],
 providers: [
 { provide: MatFormFieldControl, useExisting: FormFieldCustomControlExample }   
]
})
Bimzee
źródło
1

Nowy zaktualizowany import modułu MatInput to:

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

Zgodnie z API Angular Materials

SaiSurya
źródło
0

Uwaga Czasami pojawia się błąd, gdy używamy tagu „mat-form-field” wokół przycisku wysyłania, np .:

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

Więc uprzejmie nie używaj tego tagu wokół przycisku przesyłania

M Abdullah
źródło
0

Miałem ten sam problem

sprawa jest prosta

tylko musisz zaimportować dwa moduły do ​​swojego projektu

MatFormFieldModule MatInputModule

Fatih Çakıroğlu
źródło
0

Otrzymałem ten sam problem z powodu komentowanego elementu w następujący sposób.

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

pole formularza powinno mieć element! (np. wejście, obszar tekstu, wybór itp.)

U_R_Naveen UR_Naveen
źródło