Componente a nível de campo

Essa estratégia consiste na criação de um componente para exibição de erros de validação server-side considerando campo por campo individualmente. Para cada campo do formulário deve ser adicionado um componente de erro.

Passos

Criar componente com o template que apresentará a mensagem de erro vinda do servidor;
Disponibilizar o componente criado através do módulo Shared (declarations e exports). Isso faz com que o componente esteja disponível para todos os módulos da aplicação;
Adicionar o componente de erro em cada campo no template do formulário;

Exemplo de implementação

Esse exemplo utiliza o Framework Bootstrap. O template do componente deve ser ajustado de acordo com cada aplicação.

1. Criar componente com o template que apresentará a mensagem de erro vinda do servidor;

Esse componente subscreve-se ao validador do ExceptionService e ao ser notificado dos erros de validação busca pelo erro relativo ao campo 'error_field', e se existir, exibe a mensagem no template 'error_description'.

import { Component, Input, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { Subscription } from 'rxjs/Subscription';
import { ExceptionService } from '@demoiselle/http';

@Component({
  selector: 'error-field',
  template: `
      <div *ngIf="error" class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="close()">
          <span aria-hidden="true">&times;</span>
        </button>
        <span>{{error}}</span>
      </div>
  `
})
export class ErrorFieldComponent implements OnInit {

  validationSubscription: Subscription;
  error:string;
  @Input() field: string;

  constructor(private http: Http, private exceptionService: ExceptionService) {}
  ngOnInit() {
    this.validationSubscription = this.exceptionService.validation$.subscribe(
      error => this.processValidation(error)
    );
  }
  ngOnDestroy() {
    this.validationSubscription.unsubscribe();
  }

  processValidation(errors: any) {
    for (let error of errors) {
      // search for the field error 
      if (error.error_field == this.field) {
        this.error = error.error_description || 'Erro!';
      }
    }
  }
  close() {
    this.error = null;
  }
}

2. Disponibilizar o componente criado através do módulo Shared (declarations e exports);

import { ErrorFieldComponent } from './error-field.component';
@NgModule({
  ...
  declarations: [ErrorFieldComponent ...]
  exports: [ErrorFieldComponent ...]

})
export class SharedModule { }

3. Adicionar o componente de erro em cada campo no template do formulário (tag error-field);

<div class="form-group">
  <label for="todo-data" class="col-sm-2 control-label">Data:</label>
  <div class="col-sm-10">
    <input id="todo-data" type="date" name="dateEnd" class="form-control" required [(ngModel)]="todo.dateEnd" #dateEnd="ngModel"/>
  </div>

  <error-field [field]="'dateEnd'"></error-field>

</div>

Componente a nível de campo