Angular学习笔记（二十四）表单处理之模版式表单校验

响应式表单使用校验器的方式是将其挂在构造函数中，那么，模版式表单如何使用校验器？

答案是 —— 指令

---

如何创建指令？

命令： ng g directive xxx

如何编写自定义校验器的指令？

import { Directive } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { mobileVaild , passwordVaild ,mobileAsyncVaild } from '../validator/validator';

@Directive({
  selector: '[mobile]',
  providers:[{provide:NG_VALIDATORS,useValue:mobileVaild,multi:true}]
})
export class ValidatorDirectiveDirective {

  constructor() { }

}

写入点：

1.Directive注解器中selector就是指令的名字
2.校验器指令使用NG_VALIDATORS提供商，它来自@angular/forms
3.useValue值是要使用的校验器，multi为true代表 表单会使用多种校验器。

如何使用指令？

类似与ngModel，将指令直接写入html中

• 自定义校验器使用自定义的指令mobile

<div>手机号：<input ngModel mobile name="mobilephone" type="text"></div>

• 内置校验器使用内置的指令required

<form #localform="ngForm" (ngSubmit)="onSubmit(localform.value,localform.valid)" novalidate>
    <div>用户名：<input #localModel="ngModel" ngModel required name="nickname" type="text"></div>
</form>

因为required和html中的form属性重复，所以在form标签上挂上novalidate

---

显示友好的错误提示消息

//html:
<div>用户名：<input #localModel="ngModel" ngModel required minlength='6' name="nickname" type="text" (input)="userInupt(localModel)"></div>
    <div [hidden]="userpristine || uservalid">
        <div>
            <div [style.color]="'red'" [hidden]="!localform.form.hasError('required','nickname')" >用户名必填</div>
            <div [style.color]="'red'" [hidden]="!localform.form.hasError('minlength','nickname')" >用户名长度必须大于6个字</div>
        </div>      
    </div>

//ts:
  private userpristine = true;
  private uservalid = true;

  userInupt(forms:NgModel){
    if(forms){
      this.userpristine = forms.control.pristine;
      //这里小小注意以下,usernOnupt传入的参数是NgModel类型，如果是NgForm类型，则用forms.forms.get('nickname').pristine
      this.uservalid = forms.control.valid;      
    }
  }

步骤：

• 在ts中声明属性userpristine和uservalid为true
• 在input中编写Input()触发事件，更改其userpristine的值

运行图：