app.component.html
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <form (ngSubmit)="onSubmit()" #myForm="ngForm"> <div id="user-data"> <div class="form-group"> <label for="username">Username</label> <input type="text" id="username" class="form-control" ngModel name="username" required> </div> <button class="btn btn-default" type="button">Suggest an Username</button> <div class="form-group"> <label for="email">Mail</label> <input type="email" id="email" class="form-control" ngModel name="email" required email #myEmail="ngModel"> <span class="help-block" *ngIf="!myEmail.valid && myEmail.touched">Please enter a valid email!</span> </div> </div> <div class="form-group"> <label for="secret">Secret Questions</label> <select id="secret" class="form-control" ngModel name="secret"> <option value="pet">Your first Pet?</option> <option value="teacher">Your first teacher?</option> </select> </div> <button class="btn btn-primary" type="submit" [disabled]="!myForm.valid">Submit </button> </form> </div> </div> </div>
app.component.css
.container { margin-top: 30px; } /*Angular adds these classes to inputs for validation*/ input.ng-invalid.ng-touched { border: 1px solid red; }
References
https://angular.io/api/forms/Validators