使用Angular 2验证信用卡表单
使用Angular 2验证信用卡表单
提问于 2016-03-22 14:53:40
我正在使用angular2进行信用卡表单验证。我发现了一个使用angular1的指令。但是我如何将这个指令转换成angular 2呢？
<ion-input type="text" card-number></ion-input>
angular.module('app').directive
( 'cardNumber'
, function(){
var directive =
{ require: 'ngModel'
, link: function(scope, elm, attrs, ctrl){
ctrl.$parsers.unshift(function(value){
scope.ccinfo.type =
(/^5[1-5]/.test(value)) ? "mastercard"
: (/^4/.test(value)) ? "visa"
: (/^3[47]/.test(value)) ? 'amex'
: (/^6011|65|64[4-9]|622(1(2[6-9]|[3-9]\d)|[2-8]\d{2}|9([01]\d|2[0-5]))/.test(value)) ? 'discover'
: undefined
ctrl.$setValidity('invalid',!!scope.ccinfo.type)
return value
})
}
}
return directive
}
)回答 1
Stack Overflow用户
发布于 2016-03-22 15:06:41
您可以创建自定义验证器
class CCValidator {
validate(c:Control) {
var valid = checkCC(c.value); // code to check the validity of the number
if(!valid) {
return {invalidCC: true};
}
}
}
// component with a cc input field
@Component()
class MyCmp {
form: ControlGroup;
ngOnInit() {
this.form = new ControlGroup({
ccNumber: new Control('', new CCValidator().validate)),
});
}
}另请参阅http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html了解更多详细信息
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36147908
复制相关文章
相似问题
腾讯云开发者
