import { Component, OnInit } from '@angular/core';
import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.component.html',
    directives: [REACTIVE_FORM_DIRECTIVES],
    providers: [FormBuilder]
})
export class AppComponent {
    loginForm: FormGroup;

    username: FormControl;
    password: FormControl;

    constructor(builder: FormBuilder) {
        this.username = new FormControl('', [
            Validators.required,
            Validators.maxLength(3)
        ]);
        this.password = new FormControl('', Validators.required);

        this.loginForm = builder.group({
            username: this.username,
            password: this.password
        });
    }

    onSubmit() {}
}

import { Input, OnInit, Directive, ElementRef, Renderer } from '@angular/core';
import { FormControl } from '@angular/forms';

@Directive({
    selector: '[hide-valid]'
})
export class HideValidDirective {
    valid: Boolean;

    @Input() set isValid(property: FormControl) {
        this.valid = property.untouched || property.valid;
        this.set();
    }

    constructor(
        private el: ElementRef,
        private renderer: Renderer) {
    }

    set() {
        if (this.valid) {
            this.renderer.setElementStyle(this.el.nativeElement,
                'display', 'none');
        }
    }
}

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <label for="username">username</label>
    <input type="text" name="username" id="username" [formControl]="username">
    <div [hidden]="username.valid || username.untouched">
        <span *ngIf="username.hasError('required')">Field is required</span>
        <span *ngIf="username.hasError('maxlength')">Field is limited to 3 characters.</span>
    </div>
    <button type="submit">log in</button>
</form>

<div [hidden]="username.valid || username.untouched">
    <span *ngIf="username.hasError('required')">Field is required</span>
    <span *ngIf="username.hasError('maxlength')">Field is limited to 3 characters.</span>
</div>

<div hide-valid isValid="{{ username }}">
    <span *ngIf="username.hasError('required')">Field is required</span>
    <span *ngIf="username.hasError('maxlength')">Field is limited to 3 characters.</span>
</div>

<div hide-valid [isValid]="username">

<div [isValid]="username">