how to fix 'mat-error' is not a known element:?

Question

I am trying to add an error message to my user name and password input but something goes wrong can anyone help me? am I using the mat error wrong or should I use something else for an error message

this is my HTML -

<form class="form-horizontal form-simple" action="index.html" novalidate (submit)="doLogin(loginForm)" #loginForm="ngForm">
    <fieldset class="form-group position-relative has-icon-left mb-0">
        <input type="text" class="form-control form-control-lg" id="user-name" name="user_name" [(ngModel)]="user_name" placeholder="Your Username" required #userName="ngModel">
        <mat-error *ngIf="userName.invalid">pleas enter a valied user name</mat-error>
        <div class="form-control-position">
            <i class="ft-user"></i>
        </div>
    </fieldset>
    <fieldset class="form-group position-relative has-icon-left">
        <input type="password" name="user_password" [(ngModel)]="user_password" class="form-control form-control-lg" id="user-password" placeholder="Enter Password" required #password="ngModel">
        <mat-error *ngIf="password.invalid">pleas enter password</mat-error>
        <div class="form-control-position">
            <i class="fa fa-key"></i>
        </div>
    </fieldset>
    <div class="form-group row">
        <div class="col-md-6 col-12 text-center text-md-left">
            <fieldset>
                <input type="checkbox" id="remember-me" class="chk-remember">
                <label for="remember-me"> Remember Me</label>
            </fieldset>
        </div>
        <div class="col-md-6 col-12 text-center text-md-right"><a href="recover-password.html" class="card-link">Forgot Password?</a></div>
    </div>
    <button type="submit" class="btn btn-primary btn-lg btn-block" (click)="doLogin()"><i class="ft-unlock"></i> Login</button>
</form>

and this is my component ts file I have connected it to my database and everything works very well with the application but the only thing is not working with me is adding the mat error

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { FlashMessagesService } from 'angular2-flash-messages';
import { AngularFireAuth } from '@angular/fire/auth';
import { NgForm } from "@angular/forms";
import { FormControl, Validators } from '@angular/forms';

import { Router } from '@angular/router';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

    user_name: string = '';
    user_password: string = '';
    constructor(private fire: AngularFireAuth, private router: Router, public flashMessagesService: FlashMessagesService) {}

    ngOnInit() {}

    doLogin(form: NgForm) {
        if (form.invalid) {
            return;
        }
        //  user_name: form.value.user_name;
        //  user_password: form.value.user_password;

        this.fire.auth.signInWithEmailAndPassword(this.user_name, this.user_password).then(user => {
            this.router.navigate(['home'])
        }).catch(error => {
            console.error(error)
        })
    }
}

and this is my app.moudle -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RouterModule, Routes } from '@angular/router'; //import { NgForm } from '@angular/forms'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { FlashMessagesModule } from 'angular2-flash-messages';

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent,
        NewaccountComponent,
        HomeComponent,
        NavbarComponent,
        LeftbarComponent,
        FooterComponent


    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(routes),
        FormsModule,
        BrowserAnimationsModule,
        BrowserModule,
        AngularFireModule.initializeApp(environment.firebase), // imports firebase/app needed for everything
        AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
        FlashMessagesModule.forRoot()
    ],
    providers: [AngularFireDatabase],
    bootstrap: [AppComponent]
})
export class AppModule {}

and the error i am having at the browser side is

Uncaught (in promise) Error: Template parse errors: 'mat-error' is not a known element:
1. If 'mat-error' is an Angular component, then verify that it is part of this module.
2. If 'mat-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("older="Your Username"
                        required #userName="ngModel">
                        [ERROR ->]<mat-error *ngIf="userName.invalid">pleas enter a valied user name</mat-error>
                      "): ng:///AppModule/LoginComponent.html@58:24 'mat-error' is not a known element:
1. If 'mat-error' is an Angular component, then verify that it is part of this module.
2. If 'mat-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("lder="Enter Password"
                        required #password="ngModel">
                        [ERROR ->]<mat-error *ngIf="password.invalid">pleas enter password</mat-error>
                        <div cla"):

pleas tell me what to do ??

Answer 1

When you have such errors, the meaning is that you haven't imported the correct module in your app.module.ts.

Have you import MatFormFieldModule?