我正在构建一个应用程序与组件FormComponent. inside我使用的React式表单模块从角的核心,并创建一个自定义验证器.该函数是调用另一个函数使用this -因为我以为它会引用FormComponent,但它指的是'undefined'(?)
onInit中的代码定义了FormGroup和FormControl,而onInit之外的代码定义了函数
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
formInsurance:FormGroup;
private id:FormControl;
constructor(){}
ngOnInit() {
this.id = new FormControl('',[
Validators.required,
Validators.minLength(3),
Validators.maxLength(10),
Validators.pattern('^[0-9]+(-[0-9]+)+$|^[0-9]+$'),
this.foo
]);
this.formInsurance = new FormGroup({
id:this.id
})
}
foo(control:FormControl){
this.boo();
if(control.value){
return {
objToReturn: {
returned: name
}
};
}
return null
}
boo(){
console.log('boo')
}
}
3条答案
按热度按时间nbnkbykc1#
当从FormControl内部调用foo方法时,foo方法中的上下文没有引用FormComponent。
您可以使用bind自行设置上下文来修复此行为:
ryevplcw2#
当然,另一种选择是arrow函数,它自动绑定到
this
上下文:blmhpbnm3#
您可以返回所需的函数,从
this
中获取所需的值作为参数,然后返回所需的函数。在您示例中,它看起来像这样: