响应式表单使用校验器的方式是将其挂在构造函数中,那么,模版式表单如何使用校验器?
答案是 —— 指令
如何创建指令?
命令: 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
的值
运行图: