我正在尝试在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>Run Code Online (Sandbox Code Playgroud)
在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 …Run Code Online (Sandbox Code Playgroud)