html - 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 { }

我正在关注 live example来自 angular.io's文档，如果我在输入字段中键入禁止使用的名称“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>