Get validators present in FormGroup/FormControl
Solution 1
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!
Solution 2
Angular v12.2 introduced hasValidator()
: https://github.com/angular/angular/pull/42838
Example: this.formGroup.controls['anyCtrl'].hasValidator(Validators.required)
You can also add or remove validators later programatically. See addValidators()
, removeValidators()
, and others.
https://angular.io/api/forms/AbstractControl#hasValidator
Solution 3
This answer is a continuation of @joh04667's. They wrote:
public hasValidator(control: string, validator: string): boolean {
return !!this.myForm.controls[control].validators(control).hasOwnProperty(validator);
// returns true if control has the validator
}
However there is no AbstractControls.validators()
method. I'm assuming AbstractControls.validator()
was meant.
The hasValidator()
method only works for validators that 'fail' (eg. a required validator on a control with the value '' (empty)). Since if they pass they return null. A way around this would be to set the value so that it always fails and restore that afterwards.
public hasValidator(control: string, validator: string): boolean {
let control: AbstractControl = this.myForm.controls[control];
let lastValue: any = control.value;
switch(validator) {
case 'required':
control.setValue(''); // as is appropriate for the control
case 'pattern':
control.setValue('3'); // given you have knowledge of what the pattern is - say its '\d\d\d'
....
}
let hasValidator: boolean = !!control.validator(control).hasOwnProperty(validator);
control.setValue(lastValue);
return hasValidator;
}
And this is pretty horrible. It begs the question - Why is there no AbstractControl.getValidators(): ValidatorFn[]|null
?
What is the motivation in hiding this? Perhaps they are worried someone might put in their code:
...
secretPassword: ['', [Validators.pattern('fjdfjafj734738&UERUEIOJDFDJj')]
...
Solution 4
There is no straight forward or clean way of doing this. Here is the cleanest method that I came across that works. Tested with the latest version of Angular v10.2.0 (as of today)
Import these
import {AbstractControl, FormControl, Validators} from '@angular/forms';
Define your control
anyCtrl = new FormControl('', [Validators.required]);
Add this method
public hasRequiredField = (abstractControl: AbstractControl): boolean => {
if (abstractControl.validator) {
const validator = abstractControl.validator({}as AbstractControl);
if (validator && validator.required) {
return true;
}
}
return false;
}
How to call this method from the HTML
<input placeholder="Placeholder" [formControl]="anyCtrl" [required]="hasRequiredField(anyCtrl)">
Calling it from the Typescript file (logic) within the constructor or ngOnInit
constructor() {
console.log(this.hasRequiredField(this.anyCtrl)); // true, false if Validators array does not contain Validators.required
}
Solution 5
Based on mtinner's commend https://github.com/angular/angular/issues/13461#issuecomment-340368046 we built our own directive to mark mandatory fields accordingly.
@Directive({
selector: '[mandatoryField]'
})
export class MandatoryFieldDirective implements OnInit {
hasRequiredField(abstractControl: AbstractControl) {
if (abstractControl.validator) {
const validator = abstractControl.validator({} as AbstractControl);
if (validator && validator.required) {
return true;
}
}
return false;
}
ngOnInit() {
const required = this.hasRequiredField(this.ngControl.control);
if (required) {
this.renderer.setAttribute(this.elementRef.nativeElement, 'required', '');
if (this.parentFormField && this.parentFormField._elementRef) { // required for Angular Material form-fields
this.renderer.setAttribute(this.parentFormField._elementRef.nativeElement, 'required', '');
}
}
}
constructor(
private ngControl: NgControl, @Optional() private parentFormField: MatFormField,
public renderer: Renderer2, public elementRef: ElementRef
) { }
}
The directive sets a 'required' attribute. This attribute can be addressed via CSS. The directive works on normal HTML input tags as well as on Angular Material form fields. To work with Angular Material we had to add a little workaround as the 'required' attribute has to be set on the enclosing form field tag; not only on the actual input field. Therefore the parent component is pass-through to the directive constructor.
<mat-form-field class="date-picker-form">
<input matInput class="label-value" [formControlName]="controlName" mandatoryField [matDatepicker]="picker">
<mat-datepicker #picker class="calendar"></mat-datepicker>
</mat-form-field>
dev_054
Updated on July 09, 2022Comments
-
dev_054 almost 2 years
I'm using Material 2 in my app, but in this question I want to solve a problem specifically with Input.
As you can see in API Reference there's a property bind called
required
, which shows as asterisk in the placeholder.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"
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...Some code:
<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.
-
dev_054 about 7 years
-
dev_054 about 7 yearsAhh, and about your last statement: I know that's the difference is just the asterisk and that's why I want it :) I hope one day the Material 2 Team implements a solution to add asterisk looking for reactive forms, without the need of set the
required
in HTML itself. :) -
HankCa about 7 yearsAFAIK the
hasValidator()
method only works for validators that 'fail' (ie. a required validator on a control with value '' (emtpy)). Since if they pass they return null. A way around this would be to set the value so that it always fails and restore that afterwards. I will post an answer as follow-up as it is difficult to put code in comments. -
HankCa about 7 yearsActually, there is no
AbstractControls.validators()
method. My last comment stands for if you meantAbstractControls.validators()
and my answer will make this assumption also. -
dev_054 about 7 years"Why is there no AbstractControl.getValidators(): ValidatorFn[]|null?" I'm just following this issue (without any perspective).
-
HankCa about 7 yearsYeah I commented on that ticket a couple months ago. No word from anyone relevant yet. :(
-
Robin almost 4 yearsThis works but seems to only indicate validators that fail. For example when a control has a preset value and is required. It won't say so using this. I used a workaround where I store the value, set it to null, do this check, and restore the value.
-
moreirapontocom about 3 yearsWhat means the
!!
in yourhasValidator()
method? Thanks. -
Nebulosar about 3 years@moreirapontocom , it is called a double negative. Personally i don't fancy it, but it is a way of saying "if not null-like, be true" First makes it true or false and then reverses that, so "not (not null)" is what you get. See stackoverflow.com/questions/10467475/…
-
Adam Dunkerley almost 3 yearsThis is now the correct answer. The AbstractControl API officially supports this.
-
Adam Dunkerley almost 3 yearsAngular v12.2 introduced
hasValidator()
and a slew of other functions on theAbstractControl
API for working with validators: github.com/angular/angular/pull/42838. See pasek's answer. -
Boat over 2 years"The provided validator must be a reference to the exact same function that was provided." This makes it pretty useless as well. If I set Validators.min(0), checking control.hasValidator(Validators.min(0)) returns false, only verifying the same exact instance of validation returns true.