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
 }
 }