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

Kinda used your answer and the link you provided to come up with this solution:

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true
  }]
})
export class CustomInputComponent implements OnInit, ControlValueAccessor {
  ...
  _control: NgControl;
  disabled: boolean;

  constructor(@Inject(INJECTOR) private injector: Injector) {
  }

  ngOnInit() {
    this._control = this.injector.get(NgControl);
  }
  
  ...

custom-input.component.html

    
        {{Label}}   
        
    

Note: I'm not binding to MatInput's outputs (yea). the formControl directive that passes the control to MatInput handles that for us.

made an example for you