Vingtoft Vingtoft - 1 month ago 6
AngularJS Question

Angular2 FormBuilder: Using 'this' in a custom validator

I'm developing a form using Angular2's FormBuilder with custom validation.
Problem: In customValidator I'm using

this
to access the local object
data
. I'm getting a
undefined
error when the validation is executed.

It looks like the customValidator is executed in a different object and therefore changing the
this
reference

Question: How can I pass a reference of
this
to the customValidator?

export class Ast {
public data:any;
public myForm:FormGroup;

constructor(private _fb:FormBuilder) {
this.data = {foo: "bar"};
}

customValidator(c: FormControl) {
if (this.data.foo == "bar") { // This line crashes
// DO something
}
}

ngOnInit() {
this.myForm = this._fb.group({
some_field: ['', [<any>Validators.required], this.customValidator]
})
}
}

Answer

Using an arrow function, to make sure the function is bound to this:

some_field: ['', [<any>Validators.required], c => this.customValidator(c)]