Angular ControlValueAccessor how to transfert the invalid status?

I have created a custom input with ControlValueAccessor I can use it in formControl and it works fine. Now I would like to know when the form control is considered invalid to display a red border on the input inside my custom component.

Here is my custom input:

  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  providers: [
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: InputComponent,
export class InputComponent implements ControlValueAccessor {
  group = new FormGroup({
    input: new FormControl(''),
  touched: boolean = false;

  // The id used for the html
  id!: number;

  // The label of the html input
  @Input() label: string = '';
  @Input() type: string = 'text';

  // The method called when the input is touched
  onTouched = () => {};

  constructor() { = Math.floor(Math.random() * 100);
   * The setter of the input value
   * @param value
  writeValue(value: string): void {

   * Function to subscribe to changes
   * @param fn
  registerOnChange(fn: any): void {
    this.input.valueChanges.subscribe((value) => {
   * Function to subscribe when the input is touched
   * @param fn
  registerOnTouched(fn: any): void {
    this.onTouched = fn;

   * fucntion called to define the input as touched
  markAsTouched() {
    if (!this.touched) {
      this.touched = true;

   * @param isDisabled
  setDisabledState?(isDisabled: boolean): void {
    if (isDisabled) {
    } else {

  get input() {
    return'input') as FormControl;

Then I can use it like that.


If my email form control is invalid (because it’s not a valid email for example), then there is some class added on my component inside the DOM.
enter image description here

Is there a way to get the validity status inside the TS component ?

>Solution :

Instead of providing your value accessor in the decorator with the providers property, use this :

  @Optional() @Self private ngControl: NgControl
) {
  // ...
  if (this.ngControl) this.ngControl.valueAccessor = this;

It does the same thing. But what it does MORE, in your case, is to give you access to the native form control with this.ngControl.control.

This means you can get the status of the control at any given point, for instance, you can make this :

get status() {
  return this.ngControl.control.status; // "INVALID", "VALID", "PENDING"

Leave a Reply