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:
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.
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.
Getting validators on a 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}
Making it easier to grab:
public hasValidator(control: string, validator: string): boolean {
return !!this.myForm.controls[control].validator(control).hasOwnProperty(validator);
// returns true if control has the validator
}
and in your markup:
<md-input-container>
<input placeholder="Placeholder"
mdInput [formControl]="anyCtrl"
[required]="hasValidator('anyCtrl', 'email')">
</md-input-container>
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.
The only difference is that the [required]
directive adds the asterisk to the placeholder while Validators.required
does not.
I'm going to keep looking into NG_VALIDATORS
, but I hope this helps for now!