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

Question

I am running into an issue where my private class variable is undefined at run-time. The code is:

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

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

The issue is when valid is called on this.usernameValidation the private regex variable in FormValidation is undefined at run-time (I have confirmed the right value is being passed in). I have read that in Angular2 there are conditions around dependency injection that need to be considered, but I can't get anything to work. Essentially I have tried listing the classes as @Injectable , among other similar things. The exact error I am getting is:

EXCEPTION: TypeError: Cannot read property 'test' of undefined

Thanks

Final Edit

The answer as noted below was that my valid function needed to be an arrow function:

valid = (control:Control):ValidationResult => {

    if (this.regex.test(control.value)) {
        return null;
    }

    return {"valid”": true};
}

Answer 1

he private regex variable in FormValidation is undefined at run-time (I have confirmed the right value is being passed in).

Most likely regex is undefined:

constructor(private regex:RegExp) {
}

If not then valid(control:Control):ValidationResult { is being called with the wrong this . Fix use an arrow:

valid = (control:Control):ValidationResult => {

    if (this.regex.test(control.value)) {
        return null;
    }

    return {"valid”": true};
}

More on arrow functions : https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html

Video on this in TypeScript

Answer 2

It's a problem with JavaScript itself. In fact, when referencing a function, you need to bind to an object to be able to use the this keyword.

Using the bind method should fix your problem:

constructor(private fb:FormBuilder) {
  this.usernameValidation = new FormValidation(
              AdminRegistrationValidations.username);

  this.adminRegistrationForm = fb.group({
    username: new Control("", 
        this.usernameValidation.valid.bind(this.usernameValidation)
  });
}