Angular2 FormBuilder: Using 'this' in a custom validator

限于喜欢 提交于 2019-11-30 09:21:05

问题


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

回答1:


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

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



回答2:


The accepted answer didn't work for me in Angular 2.0 due to typing issues (casting an AbstractControl to a FormControl, I believe). The following, however, solved the problem quite nicely:

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

Using the .bind(this) on the reference to the validator did the trick for me.



来源:https://stackoverflow.com/questions/40329920/angular2-formbuilder-using-this-in-a-custom-validator

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!