Angular 4 *ngIf 不显示自定义验证的错误消息

Question

我正在尝试在 Angular 4 中测试自定义验证，并使用 Angular here 提供的“appForbiddenName”验证。

这是我设置的代码：

<div class='col-xs-12 col-sm-5'>
  <div class="form-group">
      <label class="control-label" for="firstName">First Name</label>
      <input class="form-control input-md" 
              #firstName="ngModel" 
              required name="firstName" 
              minlength="4" appForbiddenName="bob" 
              type="text" 
              placeholder="First Name"
              [(ngModel)]="personal.firstName">
      <div style="font-size: 12px; color: red;" 
            *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)"[hidden]="firstName.valid">
        <div *ngIf="firstName.errors.required">*Required</div>
        <div *ngIf="firstName.errors.minlength">Min length is 4</div>
        <div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
      </div>
    </div>
</div>

在 app.module.ts 中，我从我创建的共享文件夹中导入了 ForbiddenValidatorDirective（它位于 /* Shared Service */ 下）：

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

/* App Root */
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';

/* Feature Components */
import { PersonalComponent } from './personal/personal.component';
import { IncomeComponent } from './income/income.component';
import { BankComponent } from './bank/bank.component';
import { AddressComponent } from './address/address.component';
import { ResultComponent } from './result/result.component';

/* Routing Module */
import { AppRoutingModule } from './app-routing.module';

/* Shared Service */
import { FormDataService } from './data/formData.service';
import { WorkflowService } from './workflow/workflow.service';
import { ForbiddenValidatorDirective } from './shared/custom-validations.directive';

/* Animation Modules */
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [BrowserModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule
  ],
  providers: [
    { provide: FormDataService, useClass: FormDataService },
    { provide: WorkflowService, useClass: WorkflowService }
  ],
  declarations: [
    AppComponent, NavbarComponent, PersonalComponent, IncomeComponent, 
    BankComponent, AddressComponent, ResultComponent, ForbiddenValidatorDirective
    ],
  bootstrap: [AppComponent]
})

export class AppModule { }

我正在关注angular.io's 文档中的live example，如果我在输入字段中输入禁止的名称“bob”，则会出现错误，但不会显示错误消息。

screenshot

显示其他错误消息，例如“必需”或“最小长度为 4”，但不显示禁止名称的错误消息。输入字段以红色突出显示，就像我设置的样式显示它是无效输入一样，但自定义验证器 appForbiddenName（或我添加的任何其他自定义验证）没有错误消息。

我对 Angular 和 Typescript 都很陌生，所以请原谅这个可能很业余的问题。有人请帮忙，这似乎微不足道，但我不确定 Angular 所做的一切。

另外，为了构建这个 Angular 应用程序，我遵循了教程 here。

Answer 1

你的错误在这一行：

<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>

应该只是firstName.errors.forbiddenName

<div *ngIf="firstName.errors.forbiddenName">Name cannot be bob</div>

Answer 2

当你使用 *ngIf 或 *ngalert 模块时，从 angular 导入公共模块。这将避免与此相关的任何进一步错误。

import { CommonModule } from '@angular/common';


@NgModule({
  
  imports: [
     ..,
     ..,
     CommonModule
],
declarations: []