validate.component.html 747 Bytes
<div #container class="form-group" [ngClass]="{'has-error':!form.controls[field].valid && form.controls[field].touched}">
    <input class="form-control" type="text" placeholder="Doe" [formControl]="form.controls[field]" [(ngModel)]="value">
    <div *ngIf="form.controls[field].hasError('required') && form.controls[field].touched" class="alert alert-danger">You must include a last name.</div>
    <div *ngIf="form.controls[field].hasError('minlength') && form.controls[field].touched" class="alert alert-danger">Your last name must be at least 5 characters long.</div>
    <div *ngIf="form.controls[field].hasError('maxlength') && form.controls[field].touched" class="alert alert-danger">Your last name cannot exceed 10 characters.</div>
</div>