CODEWITHSUNDEEP
typescriptangularangular2-forms
Kliment
Kliment

Reputation: 2270

Check if input control has certain type of vallidator in angular2

I have component that wraps input field. In the component i receive the Control object from @Input() inputControl: Control;. In the template i have span that shows message if input field in the component is not required.

<span
  class="input-label-caption">
  (optional)
</span>

and the input

<input
    *ngIf="inputMode=='text' || inputMode=='email'"
    type="{{inputMode}}"
    [ngFormControl]="inputControl"
    placeholder="{{placeholder}}"
    class="input-text"
    [disabled]="inputDisabled"
    [ngClass]="{
    'inverted': inverted
    }">

How can i read form inputControl object if it contains Validators.required? I want to know if i can used it like this for example

<span
  class="input-label-caption"
  *ngIf="!inputControl.validators.required"
  >
  (optional)
</span>

Upvotes: 8

Views: 8454

Answers (3)

Javier salva&#241;&#225;
Javier salva&#241;&#225;

Reputation: 331

A bit late, but what worked for me was to check if the control has the validator or asyncValidator methods. This way you know if the control has some sync validator or some asyncValidator. Then if you want to know which validators you call the method.

Sync Validatos:

const getSyncValidators= (control: FormControl) => {
   if(control.validator) {
     return control.validator({} as AbstractControl);
   };
};

Async Validatos:

const getAsyncValidators= (control: FormControl) => {
   if(control.asyncValidator) {
     return control.asyncValidator({} as AbstractControl);
   };
};

For async validators you get an observable you can't see the name of the async Validators.

If you only want to know it has an async validators it is a simple way to do it.

Always check that control.validator or control.asyncValidator exists due to controls without any validator will throw an error due to the function does not exist.

Upvotes: 0

Fairlie Agile
Fairlie Agile

Reputation: 368

I couldn't get the above to work which isn't surprising given the changes to Angular since Jan. With the latest version of Angular (2.2.0)you will need something like this in your class.

  get required(): boolean { 
    var _validator: any = this.inputControl.validator && this.inputControl.validator(this.inputControl);
    return _validator && _validator.required;
  }

This will also handle the case where you have multiple validators in a reactive form e.g.

      name: ['', [Validators.required, Validators.minLength(2)]]

Upvotes: 5

Thierry Templier
Thierry Templier

Reputation: 202176

You can try to use this expression:

<span
  class="input-label-caption"
  *ngIf="!inputControl.errors?.required"
>
  (optional)
</span>

The errors attribute contains one entry per name of validator that failed.

I use the Elvis operators for the errors attribute since it can be undefined if there is no validation error.

Edit

Following your comment, I think that you can check a "required" validator using the === operator with the Validators.required function directly. In fact a validator is simply a function and the Validators.required function is used for "required" validation.

Here is the corresponding code:

this.hasRequiredValidator = (this.inputControl.validator === Validators.required);

In the case where the validator attribute is an array, you need to extend a bit the test to check if the Validators.required function is present in the array.

Now the code in the template would be:

(optional)

Hope it helps you, Thierry

Upvotes: 6

Related Questions