ControlValueAccessor with Error Validation in Angular Material

Question

I am trying to apply Error Validation style with ControlValueAccessor in custom Material Input Textbox. Ever since applying this custom component, all the red border validat

Answer 1

I had the same problem. I tried all and then finally could resolve using this method:

I added this listener on the custom component. You can also do it 'blur' event.

@HostListener('focusout', ['$event.target'])
  onFocusout() {
    this.onTouched();
  }

And also calling onTouched when setting any value.

 writeValue(value: any) {
    this.onTouched();
    this.Value = value ? value : '';
}