想要验证Angular Form，无论存在什么错误，按钮都会提交

Question

所以我用登录表单制作了一个小的Angular 5应用。 我已经将“电子邮件”和“密码”作为必填字段。 如果我选择该字段并失去焦点，它将变成红色，表明有问题。 如果我现在提交表单，则无论发生什么错误，它都会调用我的服务和API。

这是我的代码：

<div class="example-container">

  <form (ngSubmit)="onSubmit($event)" #loginForm="ngForm" *ngIf="this.showForm; else loadingTemplate">
    <div class="form-group">
      <mat-form-field>
        <input matInput placeholder="Email" name="email" [(ngModel)]="loginModel.email" required>
      </mat-form-field>
      <mat-form-field>
        <input matInput type="password" placeholder="Password" name="password" [(ngModel)]="loginModel.password" required>
      </mat-form-field>
      <mat-checkbox name="rememberMe" [(ngModel)]="loginModel.rememberMe">
        Remember Me
      </mat-checkbox>
      <button mat-raised-button color="accent" type="submit">Submit</button>
    </div>
  </form>

  <ng-template #loadingTemplate>
    <div class="container">
      <p>Please wait while your credentials are being checked...</p>
      <img src="../../assets/giphy.gif">
    </div>
  </ng-template>

</div>

这是我的.ts文件的一部分：

loginForm: FormGroup;

 ngOnInit() {
this.loginForm = this.fb.group({
  loginModel: this.loginModel
});
}

onSubmit(e: Event) {
    e.preventDefault();

    if (this.loginForm.valid) {
      this.showForm = false;

      // TODO check if correct login
      this.loginService.postLoginData(this.loginModel)
        .subscribe(
          data => {
            this.router.navigateByUrl('/table');
          },
          error => {
            // alert('login failed');
            this.showForm = true;
            this.openSnackBar(`Login for email: ${this.loginModel.email} failed!`);
          });
    }

  }  

我的loginForm.valid总是返回true。 有人可以看到问题所在吗？

Answer 1

首先，您可以像这样使用相反的条件，而不是缩进整个代码：

if (this.loginForm.invalid) { return; }

// Your code

这似乎没什么，但是一旦您理解了，您将获得很多时间。

接下来，声明表单的语法是

@ViewChild('loginForm') loginForm: NgForm;

现在，您要声明一个反应形式，并使用模板驱动形式的语法。