Kliment Kliment - 18 days ago 5
TypeScript Question

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>

Answer

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

Comments