Componente a nível de formulário

Essa estratégia é muito parecida com a anterior, porém é necessário apenas um componente no formulário. O erro recebido do servidor é inserido diretamente no campo de controle do formulário, funcionando como se fosse um erro de validação client side.

Passos

1. Criar o componente que ao receber os erros do servidor, injeta o erro diretamente no campo de controle do formulário. Será utilizado o nome 'remote' para diferenciar dos erros de validação client side.
2. 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;
3. Utilizar o componente no template do formulário;
4. Exibir as mensagens de erro;

Exemplo de implementação

1. Criar componente que trata o erro vindo do servidor e injeta nos campos de controle do formulário;

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

@Component({
  selector: 'error-form',
  template: `
      <div></div>
  `
})
export class ErrorFormComponent {

  validationSubscription: Subscription;
  @Input() form: NgForm;

  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) {
      console.log(error);
      console.log(this.form.controls);
      if (this.form.controls[error.error_field]) {
        console.log(this.form.controls[error.error_field]);
        this.form.controls[error.error_field].setErrors({remote: error.error_description});

      }
    }
  }

}

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

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

})
export class SharedModule { }

3. Utilizar o componente no template

<form #todoForm="ngForm">
  <!-- definição do formulário-->

  <!-- no final do form inserir o componente de validação-->
  <error-form [form]="todoForm"></error-form>
</form>

4. Exibir as mensagens de erro

Neste exemplo utilizaremos apenas uma div que apresentará os erros remote dos campos de controle do formulário. Caso o campo dateEnd receba erros de validação remote pelo componente, eles serão exibidos:

<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>

  <div *ngIf="dateEnd.errors && dateEnd.errors.remote">
    Remote: {{dateEnd.errors.remote}}
  </div>

</div>