使用 ngSubmit 在 Angular2 中登录表单

Question

I have a login form where I want to validate the email id and password. I have tried passing the id and password to the typescript file. But only the email id is being passed not the password. Here's the HTML code.

 <form #instituteForm="ngForm" (ngSubmit)="instituteLogin(instituteForm)"> <div id="user-data"> <div class="form-group"> <label for="email">Facility ID</label> <input type="email" id="email" name="facilityId" class="form-control" [(ngModel)]="institute.facilityId"> <span class="help-block" *ngIf=".email.valid && email.touched">Please enter a valid email!</span> <label for="password">Passkey</label> <input type="password" id="password" name="facilityPasskey" class="form-control" [(ngModel)]="institute.facilityPasskey"> </div> </div> <button class="btn btn-primary" type="submit">Login</button> </form>

 institute = { facilityId: '', facilityPasskey: '' }; submitted = false; instituteLogin(instForm: NgForm){ console.log("Going from facility to login"); //DONE: instForm.value['facilityID'] // instForm.value['facilityPasskry'] console.log(instForm.value); {this.router.navigateByUrl('/login/olduser');} }

Output on console

Answer 1

Checkout this StackBlitz. StackBlitz Link of problem

Answer 2

There is validation error, You forgot to add #facilityId="ngModel" in input and change validation by

 <span class="help-block" *ngIf="!facilityId.valid &&
 facilityId.touched">Please enter a valid email!</span>

so after changes you can get both value, check stackblitz