Есть ли способ получить доступ к валидаторам FormBuilder в директиве Angular? - PullRequest
Новая
       44

Есть ли способ получить доступ к валидаторам FormBuilder в директиве Angular?

0 голосов
/ 08 февраля 2020

Я пытался создать пользовательскую директиву проверки формы в Angular 8, и мне было интересно, возможно ли получить доступ к атрибутам FormBuilder Validators, таким как Required / minLength / maxLength внутри моей директивы.

В данный момент я обрабатываю минимальные / максимальные значения входа, вручную устанавливая атрибуты минимума / максимума на HTML входе 

// form.component.html
<form
  customFormValidation // my directive
  class="form"
  [formGroup]="userForm"
  (ngSubmit)="onSubmit()">
 <div class="form-group">
  <label class="input-label">Username</label>
  <input
   type="text"
   minlength="5"
   maxlength="10"
   formControlName="username"
   name="username"
   class="form-control"/>
   ...
</form>

// form.component.ts
ngOnInit() {
this.userForm = this.fb.group({
  username: [
    "",
    [
      Validators.required,
      Validators.minLength(5),
      Validators.maxLength(10)
    ]
  ]
});
}

// customFormValidation.directive.ts
...
constructor(private renderer: Renderer2, private el: ElementRef) {}
@HostListener("submit", ["$event"])
onSubmit(e) {
e.preventDefault();
this.isSumbited = true;
for (const formInput of e.currentTarget.elements) {
  // For the simplicity of the example just logging the 
  minLength value of each input in the form 
  console.log(formInput.value.minLength); 
}
}

Как видно выше, я обрабатываю входные значения min. / max длина путем доступа к атрибутам, предоставленным в html, но я действительно хочу получить доступ к min / max из валидаторов FormBuilder.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 09 февраля 2020

Почему вы хотите создать директиву для пользовательского валидатора? Вы можете узнать, как создать пользовательский валидатор для FormGroup здесь: https://angular.io/guide/form-validation (поиск слова «Пользовательские валидаторы» на странице)

...