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?

Answer 1

Use AbstractControl#getError():

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

DEMO