Angular 4 - 验证器自定义函数这是未定义的
Posted
技术标签:
【中文标题】Angular 4 - 验证器自定义函数这是未定义的【英文标题】:Angular 4 - validator custom function this is undefined 【发布时间】:2018-07-24 22:02:34 【问题描述】:我正在构建一个应用程序 与组件 FormComponent。 在里面我正在使用来自角核心的反应形式模块 并创建一个自定义验证器。 该函数正在使用 this 调用另一个函数 - 正如我所认为的那样,它将引用 FormComponent, 但它指的是“未定义” (?)
onInit 中的代码定义了 FormGroup 和 FormControl 并且在它之外定义了功能
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')
【问题讨论】:
它是在 onInit 之外编写的,但我猜它是在 onInit 范围内调用的,因为这是表单控件验证器初始化的时候 是的,抱歉,我刚刚看到了 【参考方案1】:从 FormControl 中调用 foo 方法中的上下文未引用 FormComponent。
您可以使用 bind 自行设置上下文来解决此问题:
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()
const id = new FormControl('',[
Validators.required,
Validators.minLength(3),
Validators.maxLength(10),
Validators.pattern('^[0-9]+(-[0-9]+)+$|^[0-9]+$'),
this.foo.bind(this)
]);
this.id = id;
this.formInsurance = new FormGroup(
id
)
foo(control:FormControl)
this.boo();
if(control.value)
return
objToReturn:
returned: name
;
return null
boo()
console.log('boo')
【讨论】:
谢谢!这很烦人。【参考方案2】:当然,另一种选择是箭头函数,它会自动绑定到this
上下文:
import Component, OnInit from '@angular/core';
import FormGroup, FormControl, Validators, ValidationErrors 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): ValidationErrors =>
this.boo();
if (control.value)
return
objToReturn:
returned: name
;
return null
boo()
console.log('boo')
【讨论】:
以上是关于Angular 4 - 验证器自定义函数这是未定义的的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2 / Material - 应用到父 FormGroup 的自定义验证器未显示 md 错误