What am I doing wrong? Angular mat-form-field

Question

I've got this error on the website console. In building app I've got no errors:

core.js:6210 ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (form-field.js:227)
    at MatFormField._validateControlChild (form-field.js:712)
    at MatFormField.ngAfterContentInit (form-field.js:519)
    at callHook (core.js:2573)
    at callHooks (core.js:2542)
    at executeInitAndCheckHooks (core.js:2493)
    at refreshView (core.js:9521)
    at refreshEmbeddedViews (core.js:10605)
    at refreshView (core.js:9504)
    at refreshComponent (core.js:10651)

My html:

<form [formGroup]="rowForm">
  <div formArrayName="rows">
    <div *ngFor="let rows of getControls(); let i=index"  [formGroupName]="i">

      <mat-checkbox class="example-margin" formControlName="checkbox2"  name="checkbox2" (click)="toggleInput()">Show hidden option!</mat-checkbox>

      <mat-form-field class="example-full-width">
        <input matInput placeholder="Input1" formControlName="input1"  name="input1" required>
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <input matInput placeholder="Input2" formControlName="input2"  name="input2" required>
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <input matInput placeholder="Input3" *ngIf="showInput" formControlName="input3"  name="input3" required>
      </mat-form-field>

      <button mat-button color="primary" *ngIf="rowForm.controls.rows.controls.length > 1" (click)="deleteRow(i)" class="btn btn-danger">Delete Button</button>
    </div>
  </div>
  
  <button mat-button color="primary" (click)="addNewRow()" class="btn btn-primary">Add new Row</button><br>

</form>

My modules file:

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegisterFormComponent } from './components/register-form/register-form.component';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NgSelectModule } from '@ng-select/ng-select';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { RowComponent } from './components/row/row.component';

@NgModule({
  declarations: [
    AppComponent,
    RegisterFormComponent,
    RowComponent
  ],
  
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatCardModule,
    MatButtonModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    NgSelectModule,
    MatCheckboxModule,
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

What am I doing wrong? Thanks in advance!

Did you added MatFormFieldModule and MatInputModule in your Modules Imports array? — Tom, Jul 13 '21 at 06:35

score 3 · Answer 1 · answered Jul 13 '21 at 06:38

3

I think you forgot to import the input module

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

MatInput extends from MatFormFieldControl

answered Jul 13 '21 at 06:38

Chris

2,117
13
18

I do have it. I've checked. – JustABeginner Jul 13 '21 at 06:42
what is the name of the component and in what module is it? – Chris Jul 13 '21 at 07:03

score 3 · Accepted Answer · answered Jul 13 '21 at 07:12

The error is because you has a mat-form-field, but inside there're no a input/select...

you has

//WRONG
<mat-form-field class="example-full-width">
        <input matInput placeholder="Input3" 
               *ngIf="showInput" formControlName="input3"  name="input3" required>
</mat-form-field>

You should put the *ngIf that affect to all the mat-form-field

//OK
<mat-form-field *ngIf="showInput"  class="example-full-width">
        <input matInput placeholder="Input3" formControlName="input3"  name="input3" required>
</mat-form-field>

What am I doing wrong? Angular mat-form-field

2 Answers2