How to validate the Hex input and show warning if its a invalid color?

[Exlord]

Hi, I am using color-sketch , it has a textbox for entering Hex value manually , how can I show a error message if the entered value is a invalid color hex?

[Exlord]

I ended up creating a custom component by extending the existing ones to be able to validate the hex string ...
It worked but I found a bug (or not) ...
This also happens in the demo pages too

In Chrome or Sketch (anyone who has a hex text input) , clear the input and the click somewhere else (focusout/blur) , this should reset the hex value to what it was before (last valid value), this actually happens in the code in the EditableInputComponent->handleFocusOut -> this.currentValue = this.blurValue; but the input states empty! I think this is a angular bug (change detection), since this.currentValue is equal to this.blurValue angular thinks that the value is not changed and does not update the input's text !

This was my workaround

  handleFocusOut($event) {
    super.handleFocusOut($event);
    //hacky solution and I don't lie it,   
    this.currentValue = '';
    this._cdr.detectChanges();
    this.currentValue = this.blurValue;
    this._cdr.detectChanges();
  }

As the comment says hacky solution and I don't lie it :) , there has to be a better solution?