Angular8基础应用之表单及其验证

"scripts": { "ng": "ng", "start": "ng serve --open --port 4210",//修改端口号&自动打开默认浏览器窗口 "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },

 //template-form.html <div class="container">  <form (ngSubmit)="save()" #myForm="ngForm">  <input    type="text"    [(ngModel)]="name" //双向数据绑定   name="name" //使用form时必须定义，可以理解为当前控件的名字   #myName="ngModel" //检查当前控件状态的出口，应用：myName.valid、myName.errors等   autocomplete="off" //关闭浏览器自带的显示历史记录 h5新属性   [appVerifyName]="nameList" //添加验证器  >  <!--invalid是否验证成功-->  <!--dirty是否改变-->  <!--touched是否被抚摸过-->  <div *ngIf="myName.invalid && (myName.dirty || myName.touched)">   <div *ngIf="myName.errors.required">    名称为必填项   </div>   <div *ngIf="myName.errors.repeat">    名称重复   </div>   </div>  <button type="submit" [disabled]="!myForm.form.valid">提交</button> //验证通过才能提交   </form> </div>

  //template-form.ts  ...    name: string;    nameAry:string[] = ['zhangsan','lisi','wangwu'];    constructor() { }  ngOnInit() {}    save(): void{    console.log('save 发请求')  }  ...

  //share/nameValidator.ts    import { ValidatorFn, AbstractControl } from "@angular/forms";  export function nameValidator(nameList: string[]): ValidatorFn {    return (control: AbstractControl): { [key: string]: any } | null => {      //依据指令中传递进来的名称列表进行判断，如果包含，就返回一个对象，对象的key将      //作为模板（template-form.html）中被验证的控件的erros的key，如果不包含返回null      //表示验证通过      return nameList.includes(control.value) ? { 'repeat': { value: control.value } } : null;    };  }

  //verify-name.directive.ts    import { Directive, Input } from '@angular/core';  import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms';  import { nameValidator } from './nameValidator';    @Directive({   selector: '[appVerifyName]',   providers: [{    provide: NG_VALIDATORS,    useExisting: VerifyNameDirective,    multi: true   }]  })  export class VerifyNameDirective implements Validator { //实现Validator接口     @Input('appVerifyName') //接收验证规则（reg）,或者你希望传到指令中的什么   nameList: string[];     validate(control: AbstractControl): { [key: string]: any } | null {    return this.name ? nameValidator(nameList)(control) : null   }  }