form validation messages ala nab

form-group.c.html

<div class="form-group" [ngClass]="{'has-danger': feedback && !state.valid && !state.control.pristine }">

  <label *ngIf="label" class="form-control-label">{{label}}</label>
  <ng-content></ng-content>

  <div *ngIf="feedback && !state.valid && !state.pristine">
    <div *ngIf="state.hasError('required')" class="form-control-feedback" [innerHTML]="'FORM.ERR_REQUIRED' | translate"></div>
    <div *ngIf="state.hasError('minlength')" class="form-control-feedback" [innerHTML]="'FORM.ERR_MINLENGTH' | translate:({v: state.getError('minlength').requiredLength})"></div>
    <div *ngIf="state.hasError('maxlength')" class="form-control-feedback" [innerHTML]="'FORM.ERR_MAXLENGTH' | translate:({v: state.getError('maxlength').requiredLength})"></div>
    <div *ngIf="state.hasError('incorrectFileExtension')" class="form-control-feedback" [innerHTML]="'FORM.ERR_FILEEXTENSION' | translate:({v: state.getError('incorrectFileExtension').requiredFileExtension})"></div>
    <div *ngIf="state.hasError('incorrectFileSize')" class="form-control-feedback" [innerHTML]="'FORM.ERR_FILESIZE' | translate:({v: state.getError('incorrectFileSize').requiredMinFileSize / 1024, v2: state.getError('incorrectFileSize').requiredMaxFileSize / 1024})"></div>
    <div *ngIf="state.hasError('invalidEmail')" class="form-control-feedback" [innerHTML]="'FORM.ERR_EMAIL' | translate"></div>
    <div *ngIf="state.hasError('invalidTime')" class="form-control-feedback" [innerHTML]="'FORM.ERR_TIME' | translate:({v: dateFormatP.transform(state.getError('invalidTime').reqMinHour, state.getError('invalidTime').is24Hrs ? 'HH:mm' : 'hh:mmA'), v2: dateFormatP.transform(state.getError('invalidTime').reqMaxHour, state.getError('invalidTime').is24Hrs ? 'HH:mm' : 'hh:mmA')})"></div>

    <!--TODO(tsm): Cross field errors are on FormGroup not FormControl https://gitter.im/angular/angular?at=583efc8a73abd79c55b72829 [30/11/2016]-->
    <!--<div *ngIf="state.hasError('notEqual')" class="form-control-feedback"><code>{{(state.getError('notEqual').name)</code> mismatch.</div>-->

    <!-- NON GENERAL ERR MESSAGES -->
    <div *ngIf="state.control.hasError('uniqueEmailAddr')" class="form-control-feedback" [innerHTML]="(state.getError('uniqueEmailAddr')?.message) || 'FORM.ERR_UNIQEMAIL' | translate"></div>
  </div>

  <div *ngIf="debug">
    <pre><code>{{state.control.errors | json}}</code></pre>
    <pre><code>{{state.control.value | json}}</code></pre>
  </div>

</div>

form-group.c.ts

import { Component, ContentChild, Input } from '@angular/core';
import { FormControlName } from '@angular/forms';
import { IS_DEV } from '../../constants';
import { DateFormatPipe } from 'angular2-moment';

@Component({
  selector: 'form-group-c',
  templateUrl: './form-group.c.html',
  styles: [`
    :host { display: block; }
  `],
  providers: [DateFormatPipe]
})
export class FormGroupC {
  @Input() label: string;
  @Input() feedback = true;
  @Input() debug = false && IS_DEV;
  @ContentChild(FormControlName) state;
}