使用ngSubmit

Question

我有一个登录表单，我想在其中验证电子邮件ID和密码。我尝试将ID和密码传递给打字稿文件。但是只传递电子邮件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');}
  }

Output on console

Answer 1

签出此StackBlitz。 StackBlitz Link of problem

Answer 2

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

更改验证

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

因此，更改后您可以同时获得两个值，请选中stackblitz