login-form.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'login-form',
    templateUrl: 'app/login-form.html'
})
export class LoginFormComponent {
    submitted = false;
    error = '';
    model = {
        name: '',
        password: ''
    };
    onSubmit() {
        this.submitted = true;
    }

    canSubmit() {
        if(this.model.name === undefined || this.model.name.length <= 3 || this.model.name.length >= 20) {
            this.error = 'Name has to be at least 4 and at most 20 characters.';
            return false;
        }

        this.error = undefined;
        return true;
    }

    showError() {
        return this.error === undefined;
    }
}

login-form.html

<div class="container">
    <h1>Login Form</h1>
    <form>
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" required [(ngModel)]="model.name" name="name">
            <div *ngIf="showError()">{{error}}</div>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="text" class="form-control" required [(ngModel)]="model.password" name="password">
        </div>
        <button type="submit" class="btn btn-default" [disabled]="!canSubmit()">Submit</button>
    </form>
</div>