有没有办法在 Angular 指令中访问 FormBuilder 验证器?
Is there a way to access FormBuilder Validators in an Angular directive?
我一直在尝试在 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。
感谢任何帮助。
为什么要为自定义验证器创建指令?
您可以在此处了解如何为 FormGroup 创建自定义验证器:
https://angular.io/guide/form-validation(在页面中搜索“自定义验证器”一词)
我一直在尝试在 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。
感谢任何帮助。
为什么要为自定义验证器创建指令? 您可以在此处了解如何为 FormGroup 创建自定义验证器: https://angular.io/guide/form-validation(在页面中搜索“自定义验证器”一词)