We proberen bij ons bedrijf onze eigen formulier-veld-componenten te bouwen. We proberen de Componenten van Material Design als volgt in te pakken:

veld:

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

tekstvak:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

Gebruik:

<textbox value="test" hint="my hint"></textbox>

Dit resulteert ongeveer in dit:

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

Maar ik krijg “mat-form-field moet een MatFormFieldControl bevatten”in de console. Ik denk dat dit te maken heeft met mat-form-field dat niet direct een matInput-field bevat. Maar het bevat het, het is gewoon binnen de ng-content projectie.

Hier is een blitz:
https://stackblitz.com/edit/angular-xpvwzf

Antwoord 1, autoriteit 100%

Helaas wordt inhoudsprojectie in mat-form-fieldnog niet ondersteund.
Volg het volgende github-probleemom het laatste nieuws erover te ontvangen.

Op dit moment is de enige oplossing voor u ofwel uw inhoud rechtstreeks in de mat-form-fieldcomponent te plaatsen of een MatFormFieldControlklasse te implementeren om zo een aangepaste formulierveldcomponent te creëren.

Antwoord 2, autoriteit 95%

Ik had dit probleem. Ik heb geïmporteerd MatFormFieldModulebij mijn hoofdmodule, maar vergat om MatInputModuletoe te voegen aan de importsarray, zoals SO:

import { MatFormFieldModule, MatInputModule } from '@angular/material';
@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

meer info Hier .

3, Autoriteit 536%

Probleem 1: MatInputModuleNiet geïmporteerd

Importeer MatInputModuleen MatFormFieldModuleInside Module I.E. app.module.ts

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";
@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

Probleem 2: Spellingsfout

Zorg ervoor dat u matInputtoevoegt en het is hoofdlettergevoelig.

<input matInput type="text" />

Probleem 3: Nog steeds compiler geven fout

Als de hoekcompileer nog steeds een fout geeft na het bevestigen van bovenstaande problemen, moet u proberen met het opnieuw opstarten van de app.

ng serve

4, Autoriteit 64%

Dit kan ook gebeuren als u een juiste invoer in een mat-formulierveld hebt, maar het heeft een ngIferop. B.v.:

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

In mijn geval zou mat-chip-listpas “verschijnen” nadat de gegevens zijn geladen. De validatie wordt echter uitgevoerd en mat-form-fieldklaagt met

mat-form-field moet een MatFormFieldControl bevatten

Om het te repareren, moet de besturing aanwezig zijn, dus ik heb [hidden]gebruikt:

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

Een alternatieve oplossing wordt voorgesteld door Mosta: move *ngIf for mat-form-field:

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

Antwoord 5, autoriteit 47%

Citaat uit de officiële documentatie hier:

Fout: mat-form-field moet een MatFormFieldControl bevatten

Deze fout treedt op wanneer u geen formulierveldbesturingselement aan uw formulierveld hebt toegevoegd. Als uw formulierveld een native element <input>of <textarea>bevat, zorg er dan voor dat u de instructie matInputeraan heeft toegevoegd en hebben MatInputModulegeïmporteerd. Andere componenten die kunnen fungeren als een formulierveldbesturingselement zijn onder meer <mat-select>, <mat-chip-list>en alle aangepaste formulierveldbesturingselementen die u hebt gemaakt.

Meer informatie over het maken van een “custom form field-control” hier

6, Autoriteit 33%

Als iemand bij deze fout is vastgelopen na een poging om een ​​<mat-checkbox>, wees van goede gejuich! Het werkt niet in een <mat-form-field>tag.

7, Autoriteit 24%

import {MatInputModule} from '@angular/material/input';
@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})

8, Autoriteit 18%

Ik had dit probleem ook, en ik heb <mat-select>element in mijn sjabloon, wanneer ik de matselectmodule in module importeer, het werkt, het maakt geen wetenschap, maar stil Ik hoop dat het je kan helpen.

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>

9, gezag 13%

Ik weet niet zeker of het zo eenvoudig kan zijn, maar ik had hetzelfde probleem, het veranderen van “mat-invoer” tot “matinput” in het invoerveld opgelost het probleem. In uw geval zie ik “MatinPut” en het veroorzaakt mijn app om dezelfde fout te geven.

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

10, Autoriteit 11%

Als alle van de belangrijkste code structuur / configuratie bovenstaande antwoorden uw probleem niet oplossen, hier is nog een ding om te controleren: Zorg ervoor dat u niet op een bepaalde manier ontkracht je <input>Tag.

Ik heb bijvoorbeeld dezelfde mat-form-field must contain a MatFormFieldControlFoutbericht bevatten na per ongeluk een requiredAttribuut A NA A Zelfsluitende Slash /, die mijn <input/>effectief ongeldig verklaard. Met andere woorden, ik deed dit (zie het einde van de atttributen van het invoer tag):

verkeerde :

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

Rechts :

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

Als u die fout of iets anders maakt om uw <input>, kunt u de mat-form-field must contain a MatFormFieldControl-fout bevatten. Hoe dan ook, dit is nog maar één ding om naar te kijken terwijl je debuggen.

11, Autoriteit 7%

Ik had per ongeluk de Matinput -richtlijn verwijderd van het invoerveld dat dezelfde fout heeft veroorzaakt.

bijvoorbeeld.

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

Vaste code

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

12, Autoriteit 7%

Helaas kan ik niet alleen commentaar geven op enkele al goede antwoorden, aangezien ik de SO-punten nog niet heb, maar er zijn 3 belangrijke modules die u nodig hebt om ervoor te zorgen dat u importeert in de bovenliggende module van uw component, afgezien van wat u rechtstreeks in uw component moet importeren. Ik wilde ze kort delen en benadrukken wat ze doen.

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

De eerste twee zijn voor hoekig materiaal. Veel mensen die nieuw zijn bij Angular Material zullen instinctief een van deze tegenkomen en zich niet realiseren dat het bouwen van een vorm beide vereist.

Dus wat is het verschil tussen hen?

MatFormFieldModule omvat alle verschillende soorten formuliervelden die Angular Material beschikbaar heeft. Dit is meer een module op hoog niveau voor formuliervelden in het algemeen, terwijl de MatInputModule specifiek bedoeld is voor ‘invoer’-veldtypen, in tegenstelling tot selectievakken, keuzerondjes, enz.

Het derde item in de bovenstaande lijst is de Reactive Forms-module van Angular. De Reactive Forms-module is verantwoordelijk voor een hoop Angular-liefde onder de motorkap. Als je met Angular gaat werken, raad ik je ten zeerste aan om wat tijd te besteden aan het lezen van Angular Docs. Ze hebben al je antwoorden. Het bouwen van applicaties omvat zelden GEEN formulieren, en vaker wel dan niet, zal uw applicatie reactieve formulieren bevatten. Neem daarom de tijd om deze twee pagina’s te lezen.

Angulaire documenten: reactieve formulieren

Angular Docs: module voor reactieve formulieren

Het eerste document ‘Reactive Forms’ zal uw krachtigste wapen zijn als u aan de slag gaat, en het tweede document zal uw krachtigste wapen zijn als u doorgaat met meer geavanceerde toepassingen van Angular Reactive Forms.

Vergeet niet dat deze rechtstreeks in de module van uw component moeten worden geïmporteerd, niet in de component waarin u ze gebruikt. Als ik het me goed herinner, hebben we in Angular 2 de volledige set Angular Material-modules geïmporteerd in onze hoofdapp-module, en vervolgens geïmporteerd wat we nodig hadden in elk van onze componenten direct. De huidige methode is veel efficiënter IMO omdat we gegarandeerd de hele set Angular Material-modules importeren als we er maar een paar gebruiken.

Ik hoop dat dit wat meer inzicht geeft in het bouwen van vormen met Angular Material.

Antwoord 13, autoriteit 7%

Dezelfde fout kan optreden als je een mat slide binnen een mat from field hebt als het enige element
in mijn geval had ik

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

Dit kan gebeuren als u meerdere attributen had binnen het <mat-form-field>
Eenvoudige oplossing was om de schuifknop naar de hoofdmap te verplaatsen

Antwoord 14, autoriteit 7%

Hoekig 9+ …Materiaal 9+

Ik heb gemerkt dat 3 fouten tot dezelfde fout kunnen leiden:

1. Zorg ervoor dat u MatFormFieldModule en MatInputModule hebt geïmporteerd in de app.module of de module.ts waar uw componenten worden geïmporteerd (in het geval van geneste modules)
2. Als je materiaalknoppen of selectievakjes in mat-vormveld plaatst. Bekijk de lijst met materiaalcomponenten die kunnen worden omwikkeld met mat-form-field mat-form- veld
3. Als je matInput niet in je tag opneemt. d.w.z. <input matInputtype=”number” step=”0.01″ formControlName=”price” />

Antwoord 15, autoriteit 7%

Nieuwe bijgewerkte MatInput Module-import is:

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

Volgens Angular Materials API

Antwoord 16, autoriteit 7%

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

vergeet niet om <tabe></table>

toe te voegen

<mat-form-field>
        <mat-label>Filter</mat-label>
        <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Helium" #input>
      </mat-form-field>

vergeet niet om ten slotte <tabe></table>

toe te voegen

<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
   No data matching the filter "{{input.value}}"
</td>
</tr>

Antwoord 17, autoriteit 4%

Je zou kunnen proberen deze gidsen implementeer/lever uw eigen MatFormFieldControl

Antwoord 18, autoriteit 4%

MatRadioModule werkt niet binnen MatFormField.
De docszeggen

Deze fout treedt op wanneer u geen formulierveldbesturingselement hebt toegevoegd aan uw
formulier veld. Als uw formulierveld een native of
element, zorg ervoor dat je de matInput-richtlijn eraan hebt toegevoegd en heb
geïmporteerde MatInputModule. Andere componenten die als formulierveld kunnen fungeren
controle omvatten< mat-select>, < mat-chip-list> en elk aangepast formulier
veldbesturingselementen die u heeft gemaakt.

Antwoord 19, autoriteit 4%

In mijn geval werd een van mijn haakjes sluiten voor “onChanges()” gemist op het invoerelement en dus werd het invoerelement blijkbaar helemaal niet weergegeven:

<input mat-menu-item 
      matInput type="text" 
      [formControl]="myFormControl"
      (ngModelChange)="onChanged()>

Antwoord 20, autoriteit 4%

Een gedeeltelijke oplossing is om het materiële formulierveld in een aangepaste component te plaatsen en de interface ControlValueAccessorerop te implementeren. Naast inhoudsprojectie is het effect vrijwel hetzelfde.

Bekijk volledig voorbeeldop Stackblitz.

Ik gebruikte FormControl(reactieve formulieren) in CustomInputComponentmaar FormGroupof FormArrayzou ook moeten werken als je een complexer formulierelement nodig hebt.

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-invoer.ponent.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>

21, Autoriteit 4%

U hebt matInputRichtlijn in uw invoerlabel.

22, Autoriteit 4%

U moet de MatInputModule importeren in uw app.module.ts-bestand

importeer { MatInputModule} van ‘@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
  ],

Antwoord 23, autoriteit 4%

Je kunt uiterlijk=”fill” instellen in je mat-form-field-tag, het werkt voor mij

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

Antwoord 24, autoriteit 4%

Ik had het probleem dat zich voordeed in een van mijn Karma-tests

Zoals de meeste antwoorden al aangaven, kunnen ontbrekende modules problemen veroorzaken en moeten ze ook opnieuw in het Karma TestBed worden geïmporteerd. Het lijkt er ook op dat we ook BrowserAnimationsModule moeten importeren om alles te laten werken.

In mijn onderstaande code heb ik enkele modules becommentarieerd die misschien niet nuttig voor je zijn, maar de andere 4 importen zouden zeker moeten helpen!

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EventFormComponent ],
      imports: [
        # HttpClientTestingModule,
        # RouterTestingModule,
        ReactiveFormsModule,
        MatFormFieldModule,
        MatInputModule,
        BrowserAnimationsModule,
        # TranslateModule.forRoot(),
      ],
    })
    .compileComponents();
  }));

Antwoord 25, autoriteit 2%

In mijn geval heb ik dit gewijzigd:

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

naar dit:

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

Het toevoegen van de matInput-richtlijn aan de invoertag was de oplossing voor deze fout voor mij.

Antwoord 26, autoriteit 2%

Je hebt misschien gemist om MatInputModule

. te importeren

Antwoord 27, autoriteit 2%

Opmerking
Soms treedt er een fout op wanneer we de tag “mat-form-field” rond de verzendknop gebruiken, zoals:

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

Gebruik deze tag dus niet rond de verzendknop

Antwoord 28, autoriteit 2%

Gebruik aanbieders in Component.ts-bestand

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

29, Autoriteit 2%

Niet-gevarende fout: mat-formulierveld moet een matformfieldcontrol bevatten.

Deze fout treedt op wanneer ‘MatinPutmodule’ wordt gemist in de invoer,

import { MatInputModule } from '@angular/material/input'
import { MatFormFieldModule } from '@angular/material/form-field'
@NgModule({
  imports: [
 MatInputModule ,
 MatFormFieldModule 
]})

Matinputmodule importeren in het bestand Module.ts zou helpen bij het verwijderen van het probleem.