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

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.

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 .

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

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.

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>

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



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

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”

„matInput”

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.

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

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>

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.

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.

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

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

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>

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.

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

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>

Brakuje matInput dyrektywy w tagu wejściowym.

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

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>

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

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.

Mogłeś przegapić import MatInputModule

użyj dostawców w pliku component.ts

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

Nowy zaktualizowany import modułu MatInput to:

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

Zgodnie z API Angular Materials

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

Miałem ten sam problem

sprawa jest prosta

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

MatFormFieldModule MatInputModule

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