解决Angular NG0303错误：mat-error无法绑定*ngIf及表单异常问题

将共享组件抽为独立模块后，开发模板驱动表单时遇到两个问题：

• 必填项未填写时，mat-error的错误提示不显示
• 控制台抛出NG0303错误：Can't bind to 'ngIf' since it isn't a known property of 'mat-error'

相关代码 #

login.component.html

<mat-card>
    <form #form="ngForm" (submit)="onSubmit(form)">
        <mat-form-field>
            <input type="email" matInput name="email" ngModel #email="ngModel" required>
            <mat-error *ngIf="true">email required</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input type="password" matInput name="password" ngModel #password="ngModel" required>
            <mat-error *ngIf="password.invalid">password required</mat-error>
        </mat-form-field>
        <button mat-button>Submit</button>
    </form>
</mat-card>

shared.module.ts（原始代码）

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AngularMaterialModule } from 'src/app/added.modules/angular.material/angular.material.module';
import { AppRoutingModule } from 'src/app/app-routing.module';
import { JoinComponent } from './auth/join/join.component';
import { LoginComponent } from './auth/login/login.component';
import { ErrorComponent } from './error/error.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    HeaderComponent,
    JoinComponent,
    LoginComponent,
    ErrorComponent,
  ],
  imports: [ AngularMaterialModule, AppRoutingModule, FormsModule],
  exports: [HeaderComponent, JoinComponent, LoginComponent, ErrorComponent],
})
export class SharedModule {}

解决方案 #

问题根源是共享模块中未导入BrowserModule，该模块提供了*ngIf等结构型指令的核心支持。在SharedModule的imports数组中添加BrowserModule后，问题即可解决。

修改后的shared.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AngularMaterialModule } from 'src/app/added.modules/angular.material/angular.material.module';
import { AppRoutingModule } from 'src/app/app-routing.module';
import { JoinComponent } from './auth/join/join.component';
import { LoginComponent } from './auth/login/login.component';
import { ErrorComponent } from './error/error.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    HeaderComponent,
    JoinComponent,
    LoginComponent,
    ErrorComponent,
  ],
  imports: [
    BrowserModule,
    AngularMaterialModule,
    AppRoutingModule,
    FormsModule,
  ],
  exports: [HeaderComponent, JoinComponent, LoginComponent, ErrorComponent],
})
export class SharedModule {}

添加BrowserModule后，*ngIf指令正常生效，必填项的错误提示能够正确显示，表单功能恢复正常。

内容的提问来源于stack exchange，提问作者kwangjin baek