Хотите проверить угловую форму, кнопка отправляет независимо от того, какая ошибка присутствует

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;

Прямо сейчас вы объявляете реактивную форму и используете синтаксис управляемой шаблоном формы.