Check if input control has certain type of vallidator in angular2

Question

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>

Answer 1

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

Answer 2

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)]]