时间戳

首页 > 解决方案 > Angular 自定义验证器：为什么要导出函数？

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

问题描述

我正在 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;
  }
}

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

标签： angularangular7customvalidator

解决方案

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

此外，在您的情况下，您可以使用内置的 max验证器，可在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;
  }
}

推荐阅读