Question

我正在使用被动表单并尝试在FormGroup上创建扩展方法。我的代码在这里：

import { FormGroup } from '@angular/forms';

declare module '@angular/forms' {
  interface FormGroup {
    setErrorForControl: (error: string, control: string) => FormGroup;
  }
}

FormGroup.prototype.setErrorForControl = function (error: string, control: string) {
  let errors = this.controls[control].errors;
  errors = errors ? errors : {};

  errors[error] = true;

  this.controls[control].setErrors(errors);

  console.log(this.controls[control].errors);
};

首先，此代码无法编译。它说：

FormGroup仅指类型，但在此处用作值。

我想在代码中使用我的方法：

this.myForm.setErrorForControl('someError', 'nirstName');

基本上我想传递控件名称和错误名称，这个方法应该在表单中设置错误。

更新：

我可以通过添加：

来实现这一目标

FormGroup.prototype['setErrorForControl'] = function (error: string, control: string)

在我可以做的代码中：

(<any>this.myForm).setErrorForControl('custom', 'FirstName');

问题是因为FormGroup类型不存在。任何解决方案？

Answer 1

您将FormGroup定义为interface，这基本上是其类型的声明。但是你正在尝试调整它的原型，你只能用一个值来做，而不是用一个类型。

我建议为此创建自己的包装并改为使用它：

export class MyFormGroup extends FormGroup {

  setErrorForControl(error: string, control: string) {
    let errors = this.controls[control].errors;
    errors = errors ? errors : {};

    errors[error] = true;

    this.controls[control].setErrors(errors);

    console.log(this.controls[control].errors);
  }

}

然后你可以使用它：

this.myForm = new MyFormGroup(...);
this.myForm.setErrorForControl('someError', 'firstName');

Answer 2

您需要导入要扩展的类，否则TypeScript不知道它是一个类。如果它认为它只是一个界面，它就不会允许您访问prototype，因为界面在运行时不存在。

import { FormGroup } from "@angular/forms";

declare module '@angular/forms' {
  interface FormGroup {
    setErrorForControl: (error: string, control: string) => FormGroup;
  }
}

FormGroup.prototype.setErrorForControl = function (error: string, control: string) {
  let errors = this.controls[control].errors;
  errors = errors ? errors : {};

  errors[error] = true;

  this.controls[control].setErrors(errors);

  console.log(this.controls[control].errors);
};

请参阅此处的示例：https://github.com/ReactiveX/rxjs/blob/master/src/add/operator/map.ts

FormGroup上的扩展方法

2 个答案: