有角度 – 获取FormGroup / FormControl中的验证器

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

Angular并没有真正提供一个伟大而干净的方式来做到这一点,但这是可能的.我认为验证器存储在注入到FormBuilder(NG_VALIDATORS)中的一个服务中,我将研究劫持该服务或将其注入到一个组件中,但现在这将工作：

docs和源显示在ValidatorFn中键入的AbstractControl上的验证器成员. ValidatorFn不幸的是只有一个空类型,所以我们看不到发生了什么.然而,在通过生成的源并探测应用程序之后,似乎我们可以通过这个验证器方法一个控制参数,这将返回该控件上存在的所有验证器的对象,而不管它是否通过.

奇怪的是,这只适用于FormControl本身而不是FormGroup(在FormGroup上,验证器成员不是一个函数,在我的测试中总是为空).编译的JS说这个函数需要一个控制参数;我已经尝试传递FormControl引用,但是据我所知,只要该参数不为null,它将只返回控件上的验证器.

在FormControl上获取验证器

// 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].validators(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的特殊情况

所需的验证器具有快捷方式. [必需]绑定实际上是RequiredValidator伪指令的一个实例(source / forms.js的第5022行).这个指令实际上会将所需的Validator添加到它所在的FormControl中.它等效于在初始化时将Validators.Frequest添加到FormGroup.因此,将bound属性设置为false将会从该控件中删除所需的Validator,反之亦然;或者,该方法会影响FormControl.required值,因此将其绑定到其更改的属性将不会太多.

唯一的区别是,[required]指令将星号添加到占位符,而Validators.required不会.

我会继续研究NG_VALIDATORS,但我希望这有助于现在！