Angular 2 retrieve error message from custom validator

Question

I have written a custom validator in angular 2

function validateSomething(): ValidatorFn {
  return (control: Abstractcontrol): { [key: string]: any } => {
    return {'validateSomething': 'Validation failed because'};
  }
}

Pretty simple validator. Now in the html I display a dialog based on the output of the validator. What I want is to be able to display the error from the validator ('Validation failed because'). Most tutorials that I saw use hasError('validateSomething') in the html and then hard code the error, like so:

<div class="ui pointing orange basic label" *ngIf="form.controls['workDate'].hasError('validateSomething')">
    Here I want to display the message from the validator 
</div>

Is there a way that I can get the error message from the validator?

Notice in the <div> I hard code the message to the user. What I want is to retrieve the message from the validator "Validation failed because" — Joe.b
– Joe.b, Commented Mar 2, 2017 at 4:22

developer033 · Accepted Answer · 2019-04-27 00:20:08Z

7

Use AbstractControl#getError():

<div 
  class="ui pointing orange basic label"
  *ngIf="form.getError('validateSomething', 'workDate') as error>
  {{ error }}
</div>

DEMO

edited Apr 27, 2019 at 0:20

answered Mar 2, 2017 at 4:21

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aluan Haddad Over a year ago

Or more cleanly form.controls.workDate.errors.validateSomething

Aliaksei Maniuk · Accepted Answer · 2017-07-27 02:20:54Z

1

Let's assume, that you have custom validation directive (appValidateSomething), which does some validation logic. 'Validate' method looks like:

validate(c: AbstractControl): { [key: string]: any; } {
    const v = c.value;
    if (isValid(v)) {
        return null;
    } else {
        // Return error object.
        return {
            'invalidValue': v
        }
    };
}

In HTML code you can write following code:

<input [(ngModel)]="model" type="text" #obj1="ngModel" appValidateSomething/>
<div *ngIf="obj1.errors && (obj1.dirty || obj1.touched)">
    <div [hidden]="!obj1.errors.invalidValue">Wrong value.</div>
</div>

It is important that 'invalidValue' from returning error-object from validate function matches with error object '.errors.invalidValue'.

answered Jul 27, 2017 at 2:20

Aliaksei Maniuk

1,7043 gold badges20 silver badges33 bronze badges

1 Comment

tblev Over a year ago

What is the origin of obj? Is it a Form Control?

Collectives™ on Stack Overflow

Angular 2 retrieve error message from custom validator

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related