为什么我的构造函数参数私有类成员在运行时未定义?

时间:2016-03-03 05:55:18

标签: javascript dependency-injection typescript undefined angular

我遇到的问题是我的私有类变量在运行时是未定义的。代码是:

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};
}

2 个答案:

答案 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

视频on this in TypeScript

答案 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)
  });
}