Working on an Angular form, attempting to validate a reactive form with Material design template.
Encountering an error when trying to use ngIf condition for validation in the textbox:
Error: ERROR Error: mat-form-field must contain a MatFormFieldControl.
Solutions attempted:
1. Imported MatInputModule in module.ts file
2. Added matInput to input
Despite these efforts, the error persists.
Including 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 { 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 { }