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

В приведенном выше примере в основном реализован валидатор для двух разных видов форм.

Подход с директивой полезен, если вы собираетесь использовать шаблонно-управляемые формы , в то время как нижеприведенная функция, которая понадобится, если вы хотите управлять своей формой с помощью ваших .ts-файлов, то есть вы хотите реактивных форм .

Они работают по-разному и используются совершенно по-другому , В то время как для одного случая у вас было бы что-то вроде

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

Вы бы go для

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

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

в случае реактивных форм.

Вы можете прочитать больше об этом в официальном документе форма проверки

Answer 2

Возможно, вы захотите экспортировать функцию, если логик валидатора c будет использоваться в нескольких местах.

Также, в вашем случае, вы можете использовать встроенный 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;
  }
}

Answer 3

Поскольку вы экспортируете MaximumValueValidator, вы также можете использовать логи валидатора c непосредственно внутри файлов TS, импортировав функцию.

Директива может использоваться только в HTML файлах, поэтому для использования вашей формы она обойдется без экспорта.

Если вы хотите использовать проверку внутри файлов TS для По какой-то причине вы можете экспортировать функцию MaximumValueValidator, поскольку это реальный лог c вашего валидатора.

Если вы не планируете проводить эту проверку и в файлах TS, вы можете удалить экспорт для MaximumValueValidator.

Answer 4

ключевое слово «export» необходимо, если вы хотите использовать указанный класс c или конкретную функцию c в других классах или функциях. Без экспорта мы не можем импортировать эти классы или функции.

например,

export class HomeComponent {}

export function ValidatorFunction {}

в другом классе, вы можете использовать

import { HomeComponent } from '/somelocation';

import { ValidatorFunction } from '/somelocation';

Однако, когда речь идет об этом конкретном c сценарии, вам не нужно импортировать его, потому что это stati c метод. Пожалуйста, обратитесь по ссылке ниже. Stati c Методы и Angular 2 Службы в JavaScript ES6