有没有办法在 Angular 指令中访问 FormBuilder 验证器？

Question

我一直在尝试在 Angular 8 中创建自定义表单验证指令，我想知道是否可以在我的指令中访问 FormBuilder Validators 属性，例如 Required/minLength/maxLength。

目前，我正在通过手动设置 HTML 输入

上的 min/max 属性来处理输入的 min/max 值

// 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); 
}
}

如上所示，我通过访问 html 中提供的属性来处理输入 min/max 长度，但我真正想要的是从 FormBuilder 验证器访问 min/max。

感谢任何帮助。

Answer 1

为什么要为自定义验证器创建指令？您可以在此处了解如何为 FormGroup 创建自定义验证器： https://angular.io/guide/form-validation（在页面中搜索“自定义验证器”一词）

有没有办法在 Angular 指令中访问 FormBuilder 验证器？

Is there a way to access FormBuilder Validators in an Angular directive?

angular

angular-directive

angular2-formbuilder

angular-validator