Angular 自定义验证器：为什么要导出函数？

Question

我正在 Angular 中做我的第一步，必须为模板表单中的数字字段创建自定义最大验证器。就是这样：

import {Directive, Input} from '@angular/core';
import {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn} from '@angular/forms';

@Directive({
  selector: '[appMaximumValue]',
  providers: [{provide: NG_VALIDATORS, useExisting: MaximumValueDirective, multi: true}]
})
export class MaximumValueDirective implements Validator {
  @Input('appMaximumValue') maximumValue: number;

  constructor() {
  }

  validate(control: AbstractControl): ValidationErrors | null {
    return this.maximumValue ? maximumValueValidator(this.maximumValue)(control) : null;
  }
}

export function maximumValueValidator(minimum: number): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    return control.value > minimum ? {'maximumValue': {value: control.value}} : null;
  };
}

想了想发现不带导出功能也可以：

import {Directive, Input} from '@angular/core';
import {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn} from '@angular/forms';

@Directive({
  selector: '[appMaximumValue]',
  providers: [{provide: NG_VALIDATORS, useExisting: MaximumValueDirective, multi: true}]
})
export class MaximumValueDirective implements Validator {
  @Input('appMaximumValue') maximumValue: number;

  constructor() {
  }

  validate(control: AbstractControl): ValidationErrors | null {
    return Number(control.value) > this.maximumValue ? {'maximumValue': {value: control.value}} : null;
  }
}

所以我的问题是，这个导出功能的原因是什么？

Answer 1

"export"关键字是当你想在其他classes或函数中使用特定的class或特定函数时所必需的。如果不导出，我们就无法导入那些 classes 或函数。

例如，

export class HomeComponent {}

export function ValidatorFunction {}

在另一个class中，你可以使用

import { HomeComponent } from '/somelocation';

import { ValidatorFunction } from '/somelocation';

但是，当涉及到这个特定场景时，您不需要导入它，因为它是一个 static method.Please 参考下面 link。

Answer 2

如果要在多个地方使用验证器的逻辑，您可能需要导出函数。

此外，在您的情况下，您可以使用内置 max validator，在 Validators.max

下可用

@Directive({})
export class YourDirective implements Validator {
 @Input() maxValue: number

  ngOnChanges(changes: SimpleChanges): void {
    if ('maxValue' in changes) {
      this.createValidator();
    }
  }

  validate(control: AbstractControl): ValidationErrors | null {
    return this.validator ? this.validator(control) : null;
  }

  private createValidator(): void {
    this.validator = this.maxValue ? Validators.max(this.maxValue) : null;
  }
}

Answer 3

因为你导出了maximumValueValidator，你也可以通过导入函数直接在TS文件中使用验证器逻辑。

该指令只能在 HTML 文件中使用，因此对于您的表单的使用，无需导出即可。

如果你出于某种原因想在你的 TS 文件中使用验证，你可以导出 maximumValueValidator 函数，因为这是你的验证器的真正逻辑。

如果您不打算在 TS 文件中也执行此验证，您可以删除 maximumValueValidator 的导出。

Answer 4

您上面列出的示例基本上为两种不同类型的表单实现了验证器。

如果您要 template-driven forms, while the function below that would be needed is you want to control your form with your .ts-files, meaning you are going for reactive forms.

，使用指令的方法很有用

它们的工作方式不同，使用方式也大不相同。虽然在一种情况下你会得到类似

HTML:
<input type="number" appMaximumValue="5" />

你会选择

HTML:
<input type="number" formControlName="myControl" />

ts:
form = new FormGroup({
  'myControl': new FormControl(0, maximumValueValidator(5));
});

在反应形式的情况下。

您可以在官方文档中阅读更多相关信息 form validation

Angular 自定义验证器：为什么要导出函数？

Angular Custom validator: why export function?

customvalidator

angular

angular7