App.component.html
<div class="container">
<h2>Form Validation</h2>
<form>
<div class="form-group">
<label for="prettyName">Name</label>
<input type="text" class="form-control" id="prettyName" required minlength="4" maxlength="20" [(ngModel)]="prettyName" name="prettyName" #name="ngModel">
<div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
<div [hidden]="!name.errors.required">
Name is required
</div>
<div [hidden]="!name.errors.minlength">
Name must be at least 4 characters long
</div>
<div [hidden]="!name.errors.maxlength">
Name cannot be more than 20 characters long
</div>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
// ... (Same things for username, email and password)