Getting ERROR mat-form-field must contain a MatFormFieldControl

Question

I am working on Angular form where I am trying to validate a reactive form . For template I am using Material design in my project ,

I am getting error on putting condition ngIf for validation in the textbox

error is -: ERROR Error: mat-form-field must contain a MatFormFieldControl.

Please see -:

To remove this issue I have already 1. imported MatInputModule in module.ts file 2. Already added You have to add matInput to input

But still getting same error

I am putting code below

template -:

<form class="example-form" novalidate (ngSubmit)='user_signup(user)'  [formGroup]='user'>

          <div class="row align-items-center">
            <div class="col-md-1">
              <label><img src="assets/imgs/mobile-icon.svg"/></label>
            </div>
            <div class="col-md-11">
              <mat-form-field class="example-full-width" >
                <input matInput type='number' placeholder="Phone Number:"  maxlength="10" name="phone" formControlName="phone" *ngIf="( user.get('phone').hasError('required') || user.get('phone').hasError('minlength') || user.get('phone').hasError('maxlength'))&& user.get('phone').touched" required/>
              </mat-form-field>
              <div>
              <div class="error" *ngIf="user.get('phone').hasError('required') && user.get('phone').touched">
                Phone number Required
              </div>
              <div class="error" *ngIf="user.get('phone').hasError('minlength') && user.get('phone').touched">
                Min 10 digit
              </div>
              <div class="error" *ngIf="user.get('phone').hasError('maxlength') && user.get('phone').touched">
                Max 10 digit
              </div>
              </div>

            </div>
          </div>
</form>

component.ts

 import { Component, OnInit } from '@angular/core';
    import { ServicesService } from '../service/services.service';
    import { FormGroup  , FormControl  , Validators } from '@angular/forms';
    @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.scss']
    })
    export class RegisterComponent implements OnInit {
     user: FormGroup;
 constructor( public restapi:ServicesService) {

        this.user = new FormGroup({
          password: new FormControl('', [Validators.required, Validators.minLength(6)]),
          email: new FormControl('', [Validators.required,Validators.email]),
          phone: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10)]),
          });

       }

  ngOnInit() {
  }
}

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentsComponent } from './components/components.component';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule }    from '@angular/common/http';


import { MDBBootstrapModule, WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md';
import { MatTabsModule, MatDialogModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule} from '@angular/material';


/*angular material compoment*/
import { MatInputModule } from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import { RouterModule, Routes } from '@angular/router';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatTableModule} from '@angular/material/table';
import {MatSelectModule} from '@angular/material/select';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSliderModule} from '@angular/material/slider';
import {MatBadgeModule} from '@angular/material/badge';

/*component */
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { FleshScreenComponent } from './flesh-screen/flesh-screen.component';


/* Service */
import { ServicesService } from './service/services.service';

@NgModule({
  declarations: [
    AppComponent,
    ComponentsComponent,
    LoginComponent,
    RegisterComponent,
    FleshScreenComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MDBBootstrapModule.forRoot(),
    ReactiveFormsModule ,
    HttpClientModule ,
    MatFormFieldModule

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

have you tried moving the formConttrolName to the mat form field ? — Nikolai Kiefer
Please consider not importing some modules from the main entrypoint and other modules from the secondary entrypoints. Consider importing all of the Material modules from either the main entrypoint, or import the modules from the dedicated entrypoints. — Edric
For instance, you're importing MatFormFieldModule from @angular/material. Further down in the same code, you're importing MatInputModule from @angular/material/input, MatButtonModule from @angular/material/button and so on. What I'm advising you to do is to import all modules from the same root. (As in you should use the same import instead of importing a subpath entry point.) (For example, import MatButtonModule from @angular/material instead.) — Edric

Glin Zachariah Glin Zachariah · Accepted Answer · 2019-11-01T02:23:00

When using a mat-form-field tag the inner input/ select tag, the tag must contain the matNativeControl attribute with it.

eg:

<mat-form-field>
    <input matInput matNativeControl placeholder="Input">
  </mat-form-field>

Refer official docs: Link

Getting ERROR mat-form-field must contain a MatFormFieldControl

2 Answers