Why is Angular not showing the values of a string[]

Question

I've created a Plunker here - https://plnkr.co/edit/1Aztv5K2gqIc4erNgRnG?p=preview

TL;DR To see the problem you should open the developer tools window and look at the console log output. Then go to the <input> box and repeatedly add some text and then clear it. You will see the value of errors output to the console, but those errors never appear in the component's view.

I've written a custom component that implements NG_VALUE_ACCESSOR to give my control a databinding context, and NG_VALIDATORS so I can have access to the data source (AbstractControl) being validated.

I cannot see why the *ngFor in my component's template is not listing the errors that I can see are present by looking in the console.log output.

import {Component, NgModule, forwardRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {
  AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors,
  Validator
} from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/distinctUntilChanged';

@Component({
  selector: 'validation-errors',
  template: `
    <div>Errors should appear below this line</div>
    <div *ngFor='let item of errors'>{{ item }}!!!</div>
    `,
  providers: [
    {
      provide: NG_VALIDATORS,
      useClass: forwardRef(() => ValidationErrorsComponent),
      multi: true
    },
    {
      provide: NG_VALUE_ACCESSOR,
      useClass: forwardRef(() => ValidationErrorsComponent),
      multi: true
    }
  ]
})
export class ValidationErrorsComponent implements Validator, ControlValueAccessor  {
  public errors: string[] = [];

  private control: AbstractControl = null;

  private updateErrors(errorsObject: any) {
    this.errors = [];
    if (errorsObject) {
      for (const errorType of Object.keys(errorsObject)) {
        this.errors.push(errorType);
      }
    }
    console.log('Errors: ' + JSON.stringify(this.errors));
  }

  validate(c: AbstractControl): ValidationErrors | any {
    if (this.control === null && c !== null && c !== undefined) {
      this.control = c;
      this.control.statusChanges
        .distinctUntilChanged()
        .subscribe(x => this.updateErrors(this.control.errors));
    }
  }

  writeValue(obj: any): void {
  }

  registerOnChange(fn: any): void {
  }

  registerOnTouched(fn: any): void {
  }

}

It doesn't seem to be a change detection problem, as I have also tried implementing this using Observables and the async pipe and still it shows no errors.

The consumer code looks like this

//our root app component
import {Component, NgModule, forwardRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {
  AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors,
  Validator
} from '@angular/forms';
import { ValidationErrorsComponent } from './validation-errors.component';

@Component({
  selector: 'my-app',
  template: `
    <div [formGroup]='form'>
      <input formControlName='name' style="width: 100%"/> 
      <validation-errors formControlName='name'></validation-errors>
    </div>
  `,
})
export class App {
  public form: FormGroup;

  constructor(formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      name: ['Delete this text to trigger required vaidation error', Validators.required]
    })
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  exports: [    
    FormsModule,
    ReactiveFormsModule,
    ValidationErrorsComponent
  ],
  declarations: [ App, ValidationErrorsComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

Update: The problem is that 3 instances of the component were being created. One for the markup in the template, one for NG_VALIDATORS provider, and one for the NG_VALUE_ACCESSOR provider. This is because I had specified useClass instead of useExisting in the provider declarations. You could use the original code, but I think this directive is nicer to implement by adding it to an <input> so it can share its formControlName.

I have reverted to my old code that consists of a directive that creates the instance of the validator. For anyone who wishes to achieve the same goal here is the source. Note that I create instances of ValidationError, which is just a simple class.

/**
 * Used to denote a validation error of some kind
 *
 * @class ValidationError
 */
export class ValidationError {
  /**
   * @constructor
   * @param (string) message Key to the translation of the text to display
   * @param parameters Any additional parameters (max-length, etc)
   */
  constructor(public message: string, public parameters: any) {}
}

Here is the source for the directive:

import { ComponentFactoryResolver, Directive, forwardRef, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { ValidationError } from '../../validation-error';
import { ValidationErrorsComponent } from '../../components/validation-errors/validation-errors.component';

@Directive({
  selector:
    '[formControl][showValidationErrors], ' +
    '[formControlName][showValidationErrors], ' +
    '[ngModel][showValidationErrors]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ShowValidationErrorsDirective), multi: true
    }
  ]
})
export class ShowValidationErrorsDirective implements Validator, OnInit, OnDestroy  {
  errors: Observable<ValidationError[]>;

  private isSubscribedToControl = false;
  private isDestroyed = false;
  private validationErrorsComponent: ValidationErrorsComponent;
  private errorsSubject: BehaviorSubject<ValidationError[]>;

  constructor(
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {
    this.errorsSubject = new BehaviorSubject([]);
    this.errors = Observable.from(this.errorsSubject);
  }

  ngOnInit() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorsComponent);
    const componentReference = this.viewContainerRef.createComponent(factory);
    this.validationErrorsComponent = componentReference.instance;
    this.validationErrorsComponent.errors = this.errors;
  }

  validate(control: AbstractControl): ValidationErrors | any {
    this.subscribeToControlErrors(control);
    return null; // We haven't added any errors
  }

  private subscribeToControlErrors(control: AbstractControl) {
    if (!this.isSubscribedToControl) {
      this.isSubscribedToControl = true;
      control.statusChanges
        .takeWhile(x => !this.isDestroyed)
        .distinctUntilChanged()
        .map(x => control.errors)
        .subscribe(x => this.populateErrors(x));
    }
  }

  private populateErrors(errorsObject: any) {
    const errors = [];
    if (errorsObject) {
      for (const errorType of Object.keys(errorsObject)) {
        errors.push(new ValidationError(errorType, errorsObject[errorType]));
      }
    }
    this.errorsSubject.next(errors);
  }

  registerOnValidatorChange(fn: () => void): void {
  }


  ngOnDestroy(): void {
    this.isDestroyed = true;
  }
}

Here is the template for the component:

<div *ngFor="let error of errors | async">
  {{ error.message | translate }}
</div>

And the source for the component:

import { Component, Input } from '@angular/core';
import { ValidationError } from '../../validation-error';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'validation-errors',
  templateUrl: './validation-errors.component.html',
  styleUrls: ['./validation-errors.component.scss'],
})
export class ValidationErrorsComponent  {
  @Input()
  errors: Observable<ValidationError[]>;
}

And finally, this is how it is used in your consumer:

<input formControlName="mobileNumber" showValidationErrors />