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