Получение ОШИБКИ mat-form-field должно содержать MatFormFieldControl

Question

Я работаю над угловой формой, где пытаюсь подтвердить реактивную форму. Для шаблона я использую Material design в моем проекте,

Я получаю сообщение об ошибке при помещении условия ngIf для проверки в текстовое поле

ошибка: -: ОШИБКА Ошибка: поле mat-form-field должно содержать MatFormFieldControl.

Пожалуйста, смотрите -:

Для устранения этой проблемы у меня уже есть 1. импортированный MatInputModule в файле module.ts 2. Уже добавлено Вы должны добавить matInput для ввода

Но все равно появляется та же ошибка

Я ставлю код ниже

шаблон -:

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

Answer 1

Похоже, что произошла опечатка. Пожалуйста, измените ваш код на

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