角度4 * ng如果未显示用于自定义验证的错误消息

Question

我正在尝试在Angular 4中测试自定义验证，并且正在使用angular 这里提供的'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：

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的文件，如果我输入的输入字段禁名为“鲍勃”，它的未来是一个错误，但错误信息将不显示。

屏幕截图

显示其他错误消息，例如“ required”或“ min length is 4”，但未显示禁止名称的错误消息。输入字段将以红色突出显示，就像我将其设置为无效输入一样，但是自定义验证程序appForbiddenName（或我添加的任何其他自定义验证）都没有错误消息。

我是Angular和Typescript的新手，所以请为潜在的业​​余问题辩解。有人请帮忙，看似微不足道，但我不确定Angular所做的一切。

另外，要构建这个有角度的应用程序，我在这里遵循了教程。

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>