我遇到的问题是我的私有类变量在运行时是未定义的。代码是:
export class AdminRegistrationComponent {
adminRegistrationForm:ControlGroup;
usernameValidation:FormValidation;
constructor(private fb:FormBuilder) {
this.usernameValidation = new FormValidation(AdminRegistrationValidations.username);
this.adminRegistrationForm = fb.group({
username: new Control("", this.usernameValidation.valid)
});
}
submit() {
console.log(this.adminRegistrationForm);
}
}
和FormValidation
:
export class FormValidation {
constructor(private regex:RegExp) {
}
valid(control:Control):ValidationResult {
if (this.regex.test(control.value)) {
return null;
}
return {"valid”": true};
}
get():string {
return this.regex.toString().slice(1, -1);
}
}
问题是当在this.usernameValidation上调用valid时,FormValidation
中的私有正则表达式变量在运行时未定义(我已确认正在传入正确的值)。我已经读过,在Angular2中,需要考虑依赖注入的条件,但我无法工作。基本上我已经尝试将类列为@Injectable
,以及其他类似的东西。我得到的确切错误是:
EXCEPTION: TypeError: Cannot read property 'test' of undefined
由于
最终修改
下面提到的答案是我的有效功能需要是箭头功能:
valid = (control:Control):ValidationResult => {
if (this.regex.test(control.value)) {
return null;
}
return {"valid”": true};
}
答案 0 :(得分:2)
FormValidation中的私有正则表达式变量在运行时未定义(我已确认正在传入正确的值)。
很可能regex
未定义:
constructor(private regex:RegExp) {
}
如果没有,则使用错误的valid(control:Control):ValidationResult {
调用this
。修复使用箭头:
valid = (control:Control):ValidationResult => {
if (this.regex.test(control.value)) {
return null;
}
return {"valid”": true};
}
有关箭头功能的更多信息:https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html
答案 1 :(得分:0)
JavaScript本身存在问题。实际上,在引用函数时,您需要绑定到对象才能使用this
关键字。
使用bind
方法可以解决您的问题:
constructor(private fb:FormBuilder) {
this.usernameValidation = new FormValidation(
AdminRegistrationValidations.username);
this.adminRegistrationForm = fb.group({
username: new Control("",
this.usernameValidation.valid.bind(this.usernameValidation)
});
}