我正在尝试将验证方法分离到 ionic2/angular2 中的单个文件，即创建一个可重用的验证代码，我将来也可以将其用于其他项目
我想知道在 angular2 或 ionic2 中创建可重用文件的最佳方法是什么。
第二个问题是我尝试创建一个单独的validation.ts文件并调用该方法，但它给出了一个奇怪的错误。
我尝试了两种方法。首先创建一个文件username.ts并在其中创建一个方法。在第二个中，我创建了一个提供者并在其中放置了相同的方法。
代码：用户名.ts
import { FormControl } from '@angular/forms';
export class UsernameValidator {
constructor() {
}
validateEmail(email) {
var re = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i);
return re.test(email);
}
validatePhone(phone) {
var re = /^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$/;
return re.test(phone);
}
checkUsername(control){
if(this.validateEmail(control.value)||this.validatePhone(control.value))
{
return true;
}
else
return false;
}
}
同样的方式提供者也
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
/*
Generated class for the Validation provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular DI.
*/
@Injectable()
export class Validation {
constructor() {
console.log('Hello Validation Provider');
}
validateEmail(email) {
return true;
}
validatePhone(phone) {
return true;
}
checkUsername(control){
console.log(control.value)
var checkemail=this.validateEmail(control.value);
var checkphone=this.validatePhone(control.value);
if(checkemail||checkphone)
return true;
else
return false;
}
}
从 login.ts 文件调用函数
this.loginForm=formBuilder.group({
username: ['',Validators.compose([Validators.required]),validation.checkUsername],
password: ['',Validators.compose([Validators.required])]
});
每次我都会收到错误消息
: 无法读取未定义的属性“validateEmail”
我对 angular 和 ionic 的理解不足以克服这个错误。请帮忙
谢谢！
当您在此处设置功能时：
username: ['',Validators.compose([Validators.required]),validation.checkUsername],
validation.checkUsername获取调用函数的作用域，而不是Validation您在此处需要的类的作用域。this所以不引用Validation.
您可以通过将函数定义为箭头函数来解决此问题：
checkUsername:any = (control) => {
console.log(control.value)
var checkemail=this.validateEmail(control.value);
var checkphone=this.validatePhone(control.value);
if(checkemail||checkphone)
return true;
else
return false;
}
或在您的验证构造函数中，将函数绑定到this如下所示：
constructor() {
console.log('Hello Validation Provider');
this.checkUsername = this.checkUsername.bind(this);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句