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

显示其他错误消息，例如“required”或“min length is 4”，但不显示禁用名称的错误消息。输入字段被突出显示为红色，就像我的样式显示它是无效输入，但没有自定义验证器appForbiddenName（或我添加的任何其他自定义验证）的错误消息。

我是Angular和Typescript的新手，所以请原谅这个潜在的业余问题。有人请求帮助，这似乎微不足道，但我不确定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模块时，从角度导入公共模块。这样就可以避免任何进一步的错误。

import { CommonModule } from '@angular/common';


@NgModule({
  
  imports: [
     ..,
     ..,
     CommonModule
],
declarations: []

Angular 4 * ng如果没有显示自定义验证的错误消息

2 个答案: