Mastering TypeScript 3 - Third Edition

Login form binding

Now that we have an Auth Guard and routing working within our application, let's update the LoginPanelComponent to capture the username and password that is entered on the form, and post this back to our Express server. For simplicity, we will use standard form-based data binding. Our updated HTML is as follows:

<div class="form-group"> <input class="form-control" type="text" placeholder="Username" name="username" [(ngModel)]="username"> </div> <div class="form-group"> <input class="form-control" type="password" placeholder="Password" name="password" [(ngModel)]="password"> </div> <div class="form-group"> <button class="btn btn-primary" type="submit" (click)="onLoginClicked()">Login</button> <button class="btn btn-primary" ...