Проверка угловой формы не отображает сообщение об ошибке

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

<form [formGroup]="loginForm" (ngSubmit)="SignIn(email.value, password.value)">
  <mat-form-field>
    <input formControlName="email" name="email" matInput type="text" placeholder="email">
  </mat-form-field>
  <mat-form-field>
    <input formControlName="password" name="password" matInput type="password" placeholder="Password">
  </mat-form-field>
  <div *ngIf="errorCode" class="notification is-danger">
    Email and password does not match
  </div>
  <div class="d-flex flex-column align-items-center">
    <button mat-raised-button  class="button is-success w-100" type="submit" [disabled]="!loginForm.valid">
      Continue
    </button>
  </div>
</form>

и в моем ts

 ngOnInit() {
    this.loginForm = this.fb.group({
      email: ['', [
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ]],
      password: ['',
        Validators.required
      ],
    });
  }
SignIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
          this.ngZone.run(() => {
          this.router.navigate(['dashboard']);
        });
      }).catch((error) => {
        this.errorCode= error.message;
        console.log(this.errorCode)
      })
  }

Однако сообщение об ошибке не отображается, когда я отправил неверного пользователя. Ранее я тестировал

<div *ngIf="!loginForm.valid" class="notification is-danger">
   Email and password does not match
  </div>

но проблема в том, что он отображается только в зависимости от того, где заполняется поле, и не проверяет само поле.


angular validation angularfire angular-forms
person Monomoni    schedule 16.10.2019    source источник
comment
Можете ли вы создать стекблиц? ++ Почему ваша форма определена в методе SignIn(...)?   -  person Nicholas K    schedule 16.10.2019

Ответы (1)


arrow_upward
0
arrow_downward

Это довольно долгий путь, но вы назначаете ошибку компоненту, и обычно это может привести к сбою, только если вы указали changeDetection: ChangeDetectionStategy.OnPush в определении вашего компонента. Если это так, вам нужно только ввести ссылку детектора изменений constructor(private cd: ChangeDetectorRef) {} и использовать ее после присвоения значения ошибки в блоке .catch, например:

}).catch((error) => {
 this.errorCode= error.message;
 console.log(this.errorCode)
 this.cd.detectChanges();
})
person Nerijus Pamedytis    schedule 16.10.2019
comment
не могли бы вы подробнее уточнить и объяснить это? Я пробовал это с помощью нескольких руководств, но похоже, что моя группа форм сломалась, возвращая свойство Cannot read 'get' of undefined в моей консоли - person Monomoni; 17.10.2019