Можно ли создать валидатор для пользовательского компонента (не для FormControl) - PullRequest
Новая
       8

Можно ли создать валидатор для пользовательского компонента (не для FormControl)

0 голосов
/ 12 февраля 2019

Я пытаюсь сделать что-то подобное 

@Directive({
  selector: '[myVal][myCustomInputToComponent]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => MyVal), multi: true }
  ]
})
export class MyVal implements OnInit, Validator {

  @Input() input: any;

  constructor(private el: ElementRef) {
  }
  ngOnInit(): void {
    console.log('validator input', this.input);

  }

  validate(): { [key: string]: any } {
    console.log('validate', this.input)

    return {
      validatorName: {
        valid: false
      }
    };
  }
}

И метод validate явно не вызывался.Но, возможно, есть какой-то способ определения компонентов с действительным и недействительным состоянием.Мы не используем только FormControls для взаимодействия с клиентом, не так ли?

1 Ответ

0 голосов
/ 12 февраля 2019

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

Конечно, вы можете иметь компонент и, например, изменить входной вызов функции, но на самом деле это не проверка

Если ваша пользовательская форма Control имеетвалидатор внутри элемента управления, который пользовательский элемент управления формы должен добавить в качестве поставщика NG_VALIDATORS, и будет выглядеть как 

@Component({
  selector: 'app-custom-form-control',
  template: `...
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomFormControl),
      multi: true
    },
    {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => CustomFormControl),
  multi: true,
}
  ]

})
export class CustomFormControl implements ControlValueAccessor {

  onChange;
  onTouched;

  constructor(el:ElementRef){}
  writeValue(value: any[]|any): void {
        ...receive a value, make something to show it...
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
  }

  //A function that, when some happens, send a change
  setValue(value: any) {
    this.onChange(...)
  }

  focusOut()
  {
    this.onTouched()
  }

  validate(control: AbstractControl): ValidationErrors | null{
     ..your logic here..
    return null
  }
}
...