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 4

Angular 2 / Material - 应用到父 FormGroup 的自定义验证器未显示 md 错误

Angular7“this”未定义[重复]

自定义组件未在 Ionic v4 + Angular 6 中显示

自定义 Angular 4 验证器取决于动态值

Angular 4:使用自定义RouteReuseStrategy导致无法读取未定义的属性“prototype”