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

时间:2018-06-27 12:29:30

标签: angular validation angular-forms

所以我用登录表单制作了一个小的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。有人可以看到问题所在吗?

1 个答案:

答案 0 :(得分:3)

首先,您可以使用相反的条件,而不是缩进整个代码:

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

// Your code

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

接下来,声明表单的语法为

@ViewChild('loginForm') loginForm: NgForm;

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