<!-- Personal Tab Form Starts --> <form #personalForm="ngForm" class="editForm" novalidate> <div class="tab-pane active"> <p class="font-medium-2 text-center">{{title}}</p> <br/> <div class='row'> <div class='col-12'> <div class="row"> <div class='col-12 col-sm-6'> <div class="form-group"> <label class="form-control-label" for="firstname">First Name</label> <input class="form-control input-md" #firstname="ngModel" required id="firstname" name="firstname" type="text" [(ngModel)]="personal.firstName"> <small class="form-text text-muted danger" *ngIf="!firstname.valid && (firstname.dirty || firstname.touched)">This field is required!</small> </div> </div> <div class='col-12 col-sm-6'> <div class="form-group"> <label class="form-control-label" for="lastname">Last Name</label> <input class="form-control input-md" #lastname="ngModel" required id="lastname" name="lastname" type="text" [(ngModel)]="personal.lastName"> <small class="form-text text-muted danger" *ngIf="!lastname.valid && (lastname.dirty || lastname.touched)">This field is required!</small> </div> </div> </div> <div class="form-group"> <label class="form-control-label" for="email">Email</label> <input class="form-control input-md" #email="ngModel" required email id="email" name="email" type="text" [(ngModel)]="personal.email"> <small class="form-text text-danger" *ngIf="!email.valid && (email.dirty || email.touched)">Please enter a valid email!</small> </div> <div class="form-group text-center"> <button type="button" uiSref="work" class="btn btn-success btn-raised" [disabled]="!personalForm.valid" (click)="save(personalForm)"> Next </button> </div> </div> </div> </div> </form> <!-- Personal Tab Form Ends -->