Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2,数据验证和输入掩码的困难大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经按照 https://auth0.com/blog/angular-2-series-part-5-forms-and-custom-validation/实现了表单验证

<input class="form-control"
               type="text"
               name="phone"
               autocomplete="off"
               placeholder="(XXX)-XXX-XXXX"
               mask=""
               [disabled]="disabled"
               [(ngModel)]="candidate.phone"
               ngControl="phone"/>

static phone(control: Control): ValidationResult {

    let URL_REGEXP = /^\(\d{3}\)-\d{3}-\d{4}$/i;

    if (control.value && (control.value.length <= 5 || !URL_REGEXP.test(control.value))) {

        return {"phone": truE};
    }

    return null;
}

加上这个元素我已经实现了输入掩码目录:http://pastebin.com/wRzHSsVy

出现以下问题:输入电话号码时,验证首先执行,然后输入掩码目录.因此验证器检查的数据和输入掩码目录格式化的数据不同.例如,验证器上的电话号码是(888)-888-88882,掩码将数字转换为以下格式(888)-888-8888,但验证器已经工作并在掩码激活之前指出了错误.

解决方法

我有一个非常类似的问题,也有一个电话掩码/验证器.我最初的想法是在我的掩码中调用“this.control.valueAccessor.writeValue(…)”后以某种方式重新调用验证.

我的尝试是添加

this.control.control.updateValueAndValidity(
{ 
  onlySelf: true,emitEvent: false 
});

这似乎再次触发表格验证,但提交给验证器的值仍然是不正确的(预掩码)值.

但是,我没有在输入中使用[(ngModel)],因此您可能会使用像this post suggests这样的东西

大佬总结

以上是大佬教程为你收集整理的Angular 2,数据验证和输入掩码的困难全部内容,希望文章能够帮你解决Angular 2,数据验证和输入掩码的困难所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。