想要验证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;

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