Angular2自定义表单验证器的实现方法

胡说

最近，由于项目中表单验证的需要，数据检查是直接通过(输入)事件完成的，但是它与自包含验证器不统一，并且是非正统的。所以我计划研究定制验证器。网上有很多类似的文章，但我在实施过程中遇到了一些问题。所以我自己写了一篇文章。

文本

这里有官方文档：验证响应表、用户视觉提示、自定义验证器。本文就是基于这些文件(前两个就不详细描述了，但也说清楚了)

Angular支持内置的验证属性：

必选-将表单控件值设置为非空电子邮件-将表单控件的格式设置为电子邮件min length-设置表单控件值maxlength的最小长度-设置表单控件模式的最大长度-设置表单控件值以匹配模式对应的模式。验证结果由窗体控件的。有效，其结果状态为：

valid-valid invalid-invalid previous-表单值未更改为脏-表单值已更改为已触摸-表单控件已被访问但未被触摸-表单控件未被访问。我们经常会遇到以下场景，表单验证(请忽略难看的样式)

现在我们想要实现url验证，它可以通过正则表达式直接匹配。在这种情况下，我们可以直接使用Angular自己的验证器，但是如果我们想兼容大写？我们不能简单地用规律性来匹配。我们在判断之前需要把所有的内容都转换成小写，这样才能判断出规律性。

在这里，我们创建一个新的ValidatorBase类来存储所有验证，并创建一个新的静态方法url验证器(input:form控件)来验证数据的URL。具体方法如下：

从“@angular/forms”导入{ form control }；从“@angular/core”导入{ input }导出类validate base { public static urlValidator(input 3360 form control){ let validate string='(https？//| WWW | WWW | FTP ://| file :/)[[email protected]#/%？=~_|!] [.][[email protected]#/%=~ _ |]'；console . log(input . value)；//设置值让v=input.valueif(v！=undefinedv！='') { if(v.toLowerCase()。match(validateString)) {返回null} else { return { isUrl:true } } }返回null}}注意：

这里，当匹配成功时(即验证成功则需要返回null，但不能返回{ isur 3360 false }；如果失败，则返回{ isurl3360 true }，而不是{ isurl3360 false })，这样就可以正确表达上一种形式验证的值。

这是中的参数值。传入窗体控件的hasError()。

呼叫页面

form[formGroup]=' detailForm '(ngSubmit)=' submit()' div label for=' LinkedURL ' LinkedURL :/label input type=' LinkedURL ' name=' LinkedURL ' id=' LinkedURL '[form control]=' LinkedURL ' div class=' col-xs-4 col-sm-4 '[style . color]='(LinkedURL . toucheddlinkdurl . valid==false)？#d16e6c': '绿色' '[隐藏]=' LinkedUrl . inhesive ' div[隐藏]='！LinkedURL . haserror(' maxlength ')' LinkedURL不能超过250个字符。/div div[隐藏]='！LinkedURL . haserror(' isUrl ')' LinkedURL不是URL。/div div[隐藏]='！“链接”是必填字段。/div！-成功！-div[style . color]=' green ' '[hidden]='！链接验证成功！/div /div /div按钮类型='submit' [disabled]='！Ts对应于detailform。“有效”登录/按钮/表单调用页面

从""导入{ ValidateBase } ./././Validators/validator。“基地”；从“@棱角分明/核心”导入{组件，在初始化时}；从" @角形/形状"导入{窗体组、窗体生成器、窗体控件、验证器}；@ Component({选择器： ' validate-Component '，模板URLs : ' validate。组件。html ' })导出类清扫组件实现在init { private detailform : FormGroup；私有链接对于控制：ngOnInit():无效{ this。验证表单()；} private validateForm(){ this .LinkedURL=new FormControl '，[ Validators.required，Validators.maxLength(250)，validate base。URL validator])；//形成这个。细节形式=这个。表单生成器。组({ link Dido : this .LinkedURL，})；}}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。