Angular8如何实现表单及其验证

  //template-form.ts
  ...
  
  name: string;
  
  nameAry:string[] = ['zhangsan','lisi','wangwu'];
  
  constructor() { }

  ngOnInit() {}
  
  save(): void{
    console.log('save 发请求')
  }
  ...

（二）、验证表单

1、新建指令，用于验证ng g c d share/verifyName

2、在share目录下新建nameValidator.ts，用于书写验证函数

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

3、书写指令——验证名称不能重复

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

以上是“Angular8如何实现表单及其验证”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！