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

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

Continue reading...