菜单

Angular2表单自定义验证器的兑现

2019年8月24日 - Ajax

Angular2表单自定义验证器的落成,angular2表单

正文主要给我们介绍如何推断验证器的结果。在这里,大家就来探视怎么着达成三个自定义的验证器。

目标

咱俩要兑现四个证实手提式有线电话机号的验证器,使用的实举个例子故依照在此以前的稿子里面包车型客车实例,也正是客户音讯输入的表单页面。大家在手提式有线电话机号的要素上增添贰个认证手提式无线电话机号的验证器。然后,假如手提式有线电电话机号验证战败,就展现二个错误,页面如下:

图片 1

那部分科指标代码能够从github获取:

git clone

https://github.com/Mavlarn/angular2-forms-tutorial

若是要运转,步向项目目录,运维上面包车型客车吩咐安装依赖然后运行测量试验服务器:

cd angular2-forms-tutorial
git checkout model-driven # 检出该文所使用的tag
npm install
npm start

贯彻验证器

在Angular第22中学,完毕二个验证器特别轻巧,正是一个措施就足以,该方法的参数是四个FormControl,结果是二个张冠李戴对象也许null。用TypeScript接口表示,就是如此:

interface Validator<T extends FormControl> {
(c:T): {[error: string]:any};
}

假设是对类似Java那样的面向对象语言相比较领悟的话,上边的接口定义就很轻松领悟。当中<T
extends
FormControl>是指那么些法子中用到一个泛型T,它是三个一而再自FormControl的靶子。(c:T):
{[error:
string]:any};那是三个lambda表明式的办法定义,参数c的等级次序为T,这些方法重返三个目的。

咱俩创制二个名字为mobile.validator.ts的文件,它的剧情如下:

import { FormControl } from '@angular/forms';
export function validateMobile(c: FormControl) {
let MOBILE_REGEXP = /^1[0-9]{10,10}$/;
return MOBILE_REGEXP.test(c.value) ? null : {
validateMobile: {valid: false}
}
}

在那个注脚情势里,参数c的系列为FormControl,也正是表单控件,他有三个value属性,寄放当前的值。大家应用正则表明式,来判定那几个值是或不是合法。假设违规,就回来一个指标。
在此前的科目中,我们对验证器的证实结果是如此获得的:

<p *ngIf="userForm.controls.mobile?.errors?.required">必须输入电话</p>

userForm.controls.mobile正是表单中手提式有线电话机号这么些控件,required是required验证器对应的key,当required验证器验证失败时,就能够在errors里面增添一个值:

{
required: {valid: false}
}

之所以,大家落实的自定义的验证器,也要把验证结果用验证器的名字作为key,放到errors里面,便是这么:

{
validateMobile: {valid: false}
}

与上述同类,大家就能够在页面中用跟在此以前同样的点子来收获那几个验证器的验证结果。

在模型驱动的表单里增多验证器

接下去,大家把我们达成的验证器增多到大家的表单里,先加到模型驱动的表单里:

import { validateMobile } from '../validators/mobile.validator';
export class ReactiveFormsComponent implements OnInit {
this.userForm = this.formBuilder.group({
// ... 省略其他控件
mobile: [13800138001, [Validators.required, Validators.minLength(11), Validators.maxLength(11), validateMobile]]
});
...
}

上边的代码省略了别的的片段,完整的代码,请仿效github。

在地点的代码中,我们引进了事先完结的自定义的验证器,然后在表单控件制造代码中,对mobile控件加了三个validateMobile。

这么,我们在页面上加上相应的求证结果音信:

<p *ngIf="userForm.controls.mobile.errors?.validateMobile">电话号码格式不正确</p>

那般就完了了验证器,以及在页面彰显验证结果,就那样轻易。

在模板驱动的表单里增加验证器

可是,假设大家的表单不是在组件里用模子驱动的办法创设的,而是在页面上用html成分创设的,那么使用自定义的验证器就稍微麻烦一点。

在五个模板驱动的表单里,大家是那般使用验证器的:

<input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11">
有效
<div [hidden]="mobile.valid || mobile.pristine">
<p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">电话长度必须为11</p>
<p *ngIf="mobile.errors?.required">必须输入姓名</p>
</div>

也等于在input输入成分的属性中增多验证器。那么,大家要促成和煦的验证器在表单里面使用,除了上边的验证器方法里面,还索要2件作业:

我们须要将以此验证器定义成一个指令Directive,那样Angular在解析这段html的时候,会识别我们自定义的验证器指令。
大家还索要Angular的验证器调用大家的求证措施。
故而,在此前的mobile.validator.ts文件里,增添底下的下令定义:

@Directive({
selector: '[validateMobile][ngModel]'
})
export class MobileValidator {}

这段代码很轻便,正是用@Directive标签定义了贰个发令MobileValidator,它效果与利益的要素是还要兼有validateMobile和ngModel属性的成分。那样,我们就足以在手提式有线电话机号的因素上增加几本天性,来使那一个验证器指令起功用。
然后,我们还亟需Angular的验证器框架能够调用大家的认证办法,那就须求NG_VALIDATO奥迪Q5S。大家修改下边包车型地铁验证器的指令定义如下:

@Directive({
selector: '[validateMobile][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useValue: validateMobile, multi: true }
]
})
export class MobileValidator {}

如此那般Angular的验证器就可见将validateMobile方法应用在那个命令上。

最终,大家再把这一个新的通令,增添到AppModule的declarations里面,就足以在页面上运用这几个验证器了。

末尾,页面上使用验证器的代码如下:

<input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11" validateMobile>
有效
<div [hidden]="mobile.valid || mobile.pristine">
<p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">电话长度必须为11</p>
<p *ngIf="mobile.errors?.required">必须输入姓名</p>
<p *ngIf="mobile.errors?.validateMobile">电话号码格式不正确</p>
</div>

如上所述是作者给大家介绍的Angular2表单自定义验证器,希望对大家全数辅助,假若大家有别的疑问请给自己留言,笔者会及时还原大家的。在此也特别多谢大家对帮客之家网址的协助!

http://www.bkjia.com/Javascript/1168169.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1168169.htmlTechArticleAngular2表单自定义验证器的实现,angular2表单
本文首要给大家介绍怎么样剖断验证器的结果。在此处,大家就来拜访怎么着完毕一个自定义的验…

正文首要给咱们介绍如何剖断验证器的结果。在这里,大家就来拜望哪些完结三个自定义的验证器。

目标

我们要落成贰个证实手提式无线电话机号的验证器,使用的实例依然基于以前的稿子里面包车型客车实例,也正是客商音讯输入的表单页面。大家在手机号的因素上加多多少个认证手提式有线电话机号的验证器。然后,若是手提式有线电话机号验证失利,就显示贰个颠倒是非,页面如下:

图片 2

这一部分学科的代码能够从github获取:

git clone

https://github.com/Mavlarn/angular2-forms-tutorial

借使要运营,步向项目目录,运行上面包车型客车指令安装依赖然后运营测量检验服务器:

cd angular2-forms-tutorial
git checkout model-driven # 检出该文所使用的tag
npm install
npm start

兑现验证器

在Angular第22中学,达成四个验证器极其简单,正是叁个主意就能够,该措施的参数是二个FormControl,结果是七个谬误对象大概null。用TypeScript接口表示,正是那样:

interface Validator<T extends FormControl> {
(c:T): {[error: string]:any};
}

若是是对类似Java那样的面向对象语言相比较领会的话,下面的接口定义就很轻易精晓。当中<T
extends
FormControl>是指这一个主意中用到多个泛型T,它是一个承继自FormControl的目的。(c:T):
{[error:
string]:any};这是三个lambda表明式的诀窍定义,参数c的品种为T,那么些办法再次来到一个目的。

我们创制三个名称为mobile.validator.ts的文本,它的剧情如下:

import { FormControl } from '@angular/forms';
export function validateMobile(c: FormControl) {
let MOBILE_REGEXP = /^1[0-9]{10,10}$/;
return MOBILE_REGEXP.test(c.value) ? null : {
validateMobile: {valid: false}
}
}

在这么些评释办法里,参数c的品种为FormControl,也正是表单控件,他有一个value属性,寄存当前的值。大家选用正则表明式,来判别这一个值是或不是合法。假若违规,就赶回贰个指标。
在前头的课程中,我们对验证器的验证结果是那般获得的:

<p *ngIf="userForm.controls.mobile?.errors?.required">必须输入电话</p>

userForm.controls.mobile就是表单中手机号这几个控件,required是required验证器对应的key,当required验证器验证失败时,就可以在errors里面加多三个值:

{
required: {valid: false}
}

之所以,我们达成的自定义的验证器,也要把验证结果用验证器的名字作为key,放到errors里面,正是如此:

{
validateMobile: {valid: false}
}

这样,我们就可见在页面中用跟在此之前同一的主意来获得那些验证器的验证结果。

在模型驱动的表单里加多验证器

接下去,大家把大家达成的验证器增多到咱们的表单里,先加到模型驱动的表单里:

import { validateMobile } from '../validators/mobile.validator';
export class ReactiveFormsComponent implements OnInit {
this.userForm = this.formBuilder.group({
// ... 省略其他控件
mobile: [13800138001, [Validators.required, Validators.minLength(11), Validators.maxLength(11), validateMobile]]
});
...
}

上边的代码省略了别的的一部分,完整的代码,请参谋github。

在上头的代码中,大家引进了前面完毕的自定义的验证器,然后在表单控件创立代码中,对mobile控件加了七个validateMobile。

如此那般,大家在页面上加上相应的求证结果音讯:

<p *ngIf="userForm.controls.mobile.errors?.validateMobile">电话号码格式不正确</p>

这么就完了了验证器,以及在页面突显验证结果,就像是此简单。

在模板驱动的表单里加多验证器

然则,假使大家的表单不是在组件里用模子驱动的点子开创的,而是在页面上用html元素创建的,那么使用自定义的验证器就有一点点麻烦一点。

在一个模板驱动的表单里,大家是那般使用验证器的:

<input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11">
有效
<div [hidden]="mobile.valid || mobile.pristine">
<p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">电话长度必须为11</p>
<p *ngIf="mobile.errors?.required">必须输入姓名</p>
</div>

也便是在input输入成分的性质中增添验证器。那么,大家要落成和煦的验证器在表单里面使用,除了下边的验证器方法里面,还索要2件事情:

作者们要求将这么些验证器定义成多个指令Directive,那样Angular在深入分析这段html的时候,会识别大家自定义的验证器指令。
小编们还需求Angular的验证器调用大家的认证措施。
故而,在前头的mobile.validator.ts文件里,增加上边包车型地铁指令定义:

@Directive({
selector: '[validateMobile][ngModel]'
})
export class MobileValidator {}

这段代码很轻巧,正是用@Directive标签订义了三个下令MobileValidator,它功能的要素是还要全体validateMobile和ngModel属性的成分。那样,大家就能够在手提式有线电话机号的因素上加多壹特品质,来使这些验证器指令起效果。
接下来,大家还亟需Angular的验证器框架能够调用大家的注脚办法,这就需求NG_VALIDATO摩根4-4S。大家修改上边的验证器的授命定义如下:

@Directive({
selector: '[validateMobile][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useValue: validateMobile, multi: true }
]
})
export class MobileValidator {}

那样Angular的验证器就能够将validateMobile方法运用在那几个命令上。

终极,大家再把那些新的吩咐,增多到AppModule的declarations里面,就足以在页面上选拔那些验证器了。

最后,页面上利用验证器的代码如下:

<input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11" validateMobile>
有效
<div [hidden]="mobile.valid || mobile.pristine">
<p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">电话长度必须为11</p>
<p *ngIf="mobile.errors?.required">必须输入姓名</p>
<p *ngIf="mobile.errors?.validateMobile">电话号码格式不正确</p>
</div>

如上所述是笔者给大家介绍的Angular2表单自定义验证器,希望对我们享有帮衬,固然我们有别的疑问请给笔者留言,笔者会及时回复大家的。在此也非常谢谢大家对台本之家网站的支撑!

你可能感兴趣的小说:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图