angular - 如何修复 'mat-error' 不是已知元素 :?

Question

我正在尝试向我的用户名和密码输入添加错误消息，但出现问题有人可以帮助我吗？我使用 mat 错误是否错误，或者我应该使用其他内容来显示错误消息

这是我的 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>

这是我的组件 ts 文件，我已将其连接到我的数据库，并且应用程序的一切都运行良好，但唯一不适合我的是添加 mat 错误

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

这是我的 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 {}

我在浏览器端遇到的错误是

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"):

请告诉我该怎么做？

Answer 1

当您遇到此类错误时，意味着您没有在 app.module.ts 中导入正确的模块。

您导入了MatFormFieldModule吗？