Angular 4 - 验证器自定义函数这是未定义的答案

【问题标题】：Angular 4 - validator custom function this is undefinedAngular 4 - 验证器自定义函数这是未定义的
【发布时间】：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 范围内调用的，因为这是表单控件验证器初始化的时候
是的，抱歉，我刚刚看到了

标签： javascript angular typescript angular4-forms

【解决方案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')
  }
}

【讨论】：