Angular 2 Typescript：TypeError：this.validator 不是函数

typescript

使用Angular 2和typescript开发应用程序时，有时会遇到一个错误：TypeError：this.validator 不是函数。这个错误通常发生在使用自定义验证器时，可能会导致应用程序无法正常工作。本文将介绍这个错误的原因，并提供解决方法。

当我们在Angular 2中使用自定义验证器时，我们需要在组件类中定义一个验证器函数。这个函数将会被Angular框架调用来验证表单输入。然而，有时候我们可能会犯一个错误，即在定义验证器函数时没有正确地绑定this关键字。

在typescript中，函数默认是不绑定this关键字的。这意味着当我们在验证器函数中使用this关键字时，它将指向undefined而不是组件实例。因此，当Angular框架在验证器函数中尝试调用this.validator时，它会抛出一个TypeError错误，因为this.validator不是一个函数。

为了解决这个问题，我们需要确保在定义验证器函数时正确地绑定this关键字。有几种方法可以做到这一点。下面是一个示例代码，展示了如何正确地绑定this关键字：

typescript
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-example',
  template: <code>
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
      <div *ngIf="myControl.hasError('customValidator')">Invalid input!</div>
    </form>
  </code>
})
export class ExampleComponent {
  myForm: FormGroup;
  myControl: FormControl;
  constructor() {
    this.myControl = new FormControl('', this.customValidator.bind(this));
    this.myForm = new FormGroup({
      myControl: this.myControl
    });
  }
  customValidator(control: FormControl): { [key: string]: any } {
    // 验证逻辑
  }
}

在上面的代码中，我们使用bind方法将this关键字绑定到customValidator函数。这样，当Angular框架调用customValidator时，它将在组件实例上执行该函数，而不是在undefined上执行。

解决TypeError：this.validator不是函数错误的方法

为了解决TypeError：this.validator不是函数的错误，我们需要确保在定义验证器函数时正确地绑定this关键字。有几种方法可以做到这一点：

1. 使用bind方法将this关键字绑定到验证器函数。例如：this.myControl = new FormControl('', this.customValidator.bind(this));

2. 使用箭头函数定义验证器函数。箭头函数会自动绑定this关键字，因此不会导致TypeError错误。例如：customValidator = (control: FormControl) => { ... };

在使用Angular 2和typescript开发应用程序时，遇到TypeError：this.validator不是函数的错误是很常见的。这个错误通常是由于没有正确地绑定this关键字导致的。为了解决这个错误，我们可以使用bind方法或箭头函数来正确地绑定this关键字。通过这样做，我们可以确保验证器函数在组件实例上执行，而不是在undefined上执行，从而避免TypeError错误的发生。

希望本文对你理解并解决TypeError：this.validator不是函数的错误有所帮助！