1、创建指令

// 以下命令会创建AccountValidatorDirective指令并自动添加到AppModule
ng g directive validator/accountValidator

2、相关代码

// app.component.html<form name="loginForm" #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)"><div><p><label>账户：</label><input name="account" type="text" placeholder="请输入您的账户" autocomplete="off" #account="ngModel"[(ngModel)]="model.account" appAccountValidator="{{model.account}}" /></p><p *ngIf="account.errors" [hidden]="account.valid || account.pristine">{{account.errors.account.value}}</p><!-- 也可将验证提示信息写在模板中方便做国际化，此时指令中可返回一个空对象 --><!-- <p *ngIf="account.errors" [hidden]="account.valid || account.pristine">账户必须包含字母和数字且长度在4-16之间！</p> --></div><div><button type="submit" [disabled]="!loginForm.form.valid">提交按钮</button><button type="reset">重置按钮</button></div>
</form>// app.component.tsimport { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.styl']
})export class AppComponent {public model = {account: ''};onSubmit(data: any) {console.log(data);}}// account-validator.directive.tsimport { Directive, Input } from '@angular/core';
import { Validator, ValidationErrors, NG_VALIDATORS } from '@angular/forms';@Directive({selector: '[appAccountValidator]',providers: [{provide: NG_VALIDATORS,useExisting: AccountValidatorDirective,multi: true}]
})export class AccountValidatorDirective implements Validator {@Input('appAccountValidator')private account: string;constructor() { }validate(): { [Key: string]: ValidationErrors } {// 正在表达式可能不太准确~_~const regExp = /^[a-zA-Z]\w{3,15}$/;const oddses = regExp.test(this.account);const object = { account: { value: '账户必须包含字母和数字且长度在4-16之间！' } };return oddses ? null : object;}// validate(): { [Key: string]: ValidationErrors } {//   // 正在表达式可能不太准确~_~//   const regExp = /^[a-zA-Z]\w{3,15}$/;//   const oddses = regExp.test(this.account);//   const object = { account: {} };//   return oddses ? null : object;// }}