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