html - 在 Angular2 中使用 ngSubmit 的登录表单

我有一个登录表单，我想验证电子邮件 ID 和密码。我尝试过将 ID 和密码传递到 TypeScript 文件。但只有电子邮件 ID 被传递，密码没有。以下是 HTML 代码。

<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');}
  }

在控制台输出

答案＃1

查看这个 StackBlitz。问题的 StackBlitz 链接

答案＃2

有验证错误，您忘记在输入中添加 #facilityId="ngModel" 并通过更改验证

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

所以在更改之后，你可以得到两个值，检查 stackblitz