获取存在于 FormGroup/FormControl 中的验证器 [英] Get validators present in FormGroup/FormControl

问题描述

我在我的应用程序中使用 Material 2，但在这个问题中我想用 输入.

I'm using Material 2 in my app, but in this question I want to solve a problem specifically with Input.

正如您在API 参考中所见，有一个名为required 的属性绑定，它在占位符中显示为星号.

As you can see in API Reference there's a property bind called required, which shows as asterisk in the placeholder.

所以，我想知道是否有办法检查表单控件在 Angular 中是否有特定的验证器，因为我真的不想为每个输入手动设置 [required]="true/false"

So, I'm wondering if there's a way to check if the form control has an specific validator in Angular, because I really don't want to set manually for each input [required]="true/false"

我阅读了AbstractControl 文档，我没有找到任何关于它的信息.我遇到了 hasError method(讽刺的是没有记录在 nowhere ...... FormGroup 中也没有也不在 FormControl 中，也不在 AbstractControl 中)，但这不是我要找的.它只是检查表单控件是否有错误，但正如您可能已经读过的，我想检查控件是否有一些特定的验证器...

I read the AbstractControl docs and I didn't find anything about it. I've encountered the hasError method (which ironically isn't documented in nowhere ... neither in FormGroup nor in FormControl nor in AbstractControl), however this is not what I'm looking for. It just checks if the form control has the error, but as you may have read, I want to check if the control has some specific validators...

一些代码:

<md-input-container>
  <input placeholder="Placeholder" 
         mdInput [formControl]="anyCtrl" 
         [required]="anyCtrl.hasValidator('required')"> <!-- something like this -->
</md-input-container>

我希望这个问题足够清楚.提前致谢.

I hope the question is clear enough. Thanks in advance.

推荐答案

Angular 并没有真正提供一种很好的、​​干净的方法来做到这一点，但它是可能的.我认为验证器存储在注入 FormBuilder(NG_VALIDATORS) 的服务中，我将研究劫持该服务或将其注入组件，但现在这将起作用:

Angular doesn't really provide a great, clean way to do this, but it is possible. I think the validators are stored in a service that is injected into the FormBuilder(NG_VALIDATORS), and I'm going to look into hijacking that service or injecting it into a component, but for now this will work:

文档 和源代码显示了 AbstractControl 上的 validator 成员，该成员输入到 ValidatorFn.ValidatorFn 不幸的是只有一个 null 类型，所以我们看不到发生了什么.然而，在查看生成的源代码并探测应用程序后，似乎我们可以向这个 validators 方法传递一个 control 参数，该参数将返回一个包含所有验证器的对象控制，不管它是否通过.

The docs and the source show a validator member on AbstractControl typed to ValidatorFn. ValidatorFn unfortunately simply has a null typing, so we can't see what's going on. However, after poking through the generated source and probing an app, it seems we can pass this validators method a control parameter, which will return an object of all validators present on that control, regardless of whether or not it's passing.

奇怪的是，这仅适用于 FormControl 本身，而不适用于 FormGroup(在 FormGroup 上，validators 成员不是函数，在我的测试中总是 null).编译后的 JS 说这个函数需要一个 control 参数；我试过传入 FormControl 引用，但据我所知，只要此参数不为空，它只会返回控件上的验证器.

Strangely, this only works on the FormControl itself and not the FormGroup (on the FormGroup, the validators member is not a function and was always null in my testing). The compiled JS says this function takes a control parameter; I've tried passing in FormControl references but as far as I can tell it will just return the validators on the control as long as this parameter is not null.

// in the constructor
this.myForm = this.formBuilder.group({
  'anyCtrl': ['', Validators.required],
  'anotherCtrl': ['', Validators.compose([Validators.required, Validators.email])]
});

// later on 
let theValidators = this.myForm.controls['anyCtrl'].validator('');
console.log(theValidators) // -> {required: true};

let otherValidators = this.myForm.controls['anotherCtrl'].validator('');
console.log(otherValidators); // -> {required: true, email: true}

更容易抓取:

public hasValidator(control: string, validator: string): boolean {
  return !!this.myForm.controls[control].validator(control).hasOwnProperty(validator);
 // returns true if control has the validator
}

并在您的标记中:

<md-input-container>
  <input placeholder="Placeholder" 
         mdInput [formControl]="anyCtrl" 
         [required]="hasValidator('anyCtrl', 'email')">
</md-input-container>

Validators.required 的特殊情况

required 验证器有一个快捷方式.[required] 绑定实际上是 RequiredValidator 指令(source/forms.js 的第 5022 行)的一个实例.该指令实际上会将 required 验证器添加到它所在的 FormControl.这相当于在初始化时将 Validators.required 添加到 FormGroup 中.因此，将绑定属性设置为 false 将从该控件中删除 required 验证器，反之亦然......无论哪种方式，指令都会影响 FormControl.required 值，因此绑定将其更改为实际上不会做太多事情的属性.

Special case for Validators.required

The required validator has a shortcut. The [required] binding is actually an instance of the RequiredValidator directive (line 5022 of source/forms.js). This directive actually will add the required Validator to the FormControl it's on. It's equivalent to adding Validators.required to the FormGroup upon initialization. So, setting the bound property to false will remove the required Validator from that control and vice versa...either way, the directive affects the FormControl.required value, so binding it to a property that it changes won't really do much.

唯一的区别是 [required] 指令将星号添加到占位符，而 Validators.required 没有.

The only difference is that the [required] directive adds the asterisk to the placeholder while Validators.required does not.

我将继续研究 NG_VALIDATORS，但我希望这对现在有所帮助！

I'm going to keep looking into NG_VALIDATORS, but I hope this helps for now!

这篇关于获取存在于 FormGroup/FormControl 中的验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！