Ошибка мат не отображается для пользовательской проверки - PullRequest
Новая
       36

Ошибка мат не отображается для пользовательской проверки

0 голосов
/ 26 марта 2019

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

Я попытался найти наличие ошибки, используя и this.signupForm.errors, и this.signupForm.hasError (['notSame'])

мой файл компонента выглядит следующим образом. 

import {Component, OnInit} from '@angular/core';
import {LoginSignUpService} from '../../services/LoginSignUp.service';
import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
import {MatDialog} from '@angular/material';
import {Router} from '@angular/router';
import {DialogComponent} from '../main/dialog/dialog.component';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [LoginSignUpService]
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;
  signUpForm: FormGroup;

  constructor(private loginSignupService: LoginSignUpService, public dialog: MatDialog, private router: Router) {
  }


  login() {
    if (this.loginForm.controls.loginEmail.errors || this.loginForm.controls.loginPassword.errors) {
      this.openDialog('Error', 'Please fill the fields correctly!');
    } else {
      this.loginSignupService.login(this.loginForm.value.loginEmail, this.loginForm.value.loginPassword)
        .subscribe((response: Response) => {
            let responseBody: any;
            responseBody = response;
            localStorage.setItem('token', responseBody.access);
            localStorage.setItem('refresh-token', responseBody.refresh);
            localStorage.setItem('user', this.loginForm.value.loginEmail);
            this.router.navigate(['blog']);
          },
          (error: Response) => {

            let responseBody: any;
            responseBody = error;
            this.openDialog('Error', responseBody.error.non_field_errors[0]);
          });
    }
  }

  ngOnInit() {
    this.loginForm = new FormGroup({
      loginEmail: new FormControl(null, [Validators.required, Validators.email]),
      loginPassword: new FormControl(null, Validators.required)
    });

    this.signUpForm = new FormGroup({
        signupEmail: new FormControl(null, [Validators.required, Validators.email]),
        signupFirstName: new FormControl(null, [Validators.required, Validators.pattern('[a-zA-Z]*')]),
        signupLastName: new FormControl(null, [Validators.required, Validators.pattern('[a-zA-Z]*')]),
        signupPassword: new FormControl(null, Validators.required),
        confirmSignupPassword: new FormControl(null, Validators.required)
      },
      {validators: this.checkPasswords}
    );
  }

  checkPasswords(controls: AbstractControl): { [key: string]: any } {
    const pass = controls.get(['signupPassword']);
    const confirmPass = controls.get(['confirmSignupPassword']);

    return pass === confirmPass ? null : {notSame: true};
  }

  signUp() {
    if (this.signUpForm.controls.signupEmail.errors || this.signUpForm.controls.signupFirstName.errors
      || this.signUpForm.controls.signupLastName.errors || this.signUpForm.controls.signupPassword.errors
      || this.signUpForm.controls.confirmSignupPassword.errors || this.signUpForm.errors) {
      this.openDialog('Error', 'Please fill the fields correctly!');
    } else {

    }

  }

  openDialog(success: string, messsage: string) {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '300px',
      data: {
        isSuccess: success,
        message: messsage
      }
    });
  }
}

и код в моем шаблоне, где я хочу показать ошибку, выглядит следующим образом: 

<mat-form-field>
    <input matInput placeholder="confirm password" formControlName="confirmSignupPassword">
    <mat-error *ngIf="signUpForm.controls['confirmSignupPassword'].hasError('required')">
    Please confirm your password
    </mat-error>
    <mat-error *ngIf="!signUpForm.controls['confirmSignupPassword'].hasError('required') && signUpForm.hasError('notSame')">
    Passwords are not same
    </mat-error>
</mat-form-field>

Проблема в том, что мат-ошибка Пароли не совпадают никогда не отображается.Хотя метод signup () в моем файле компонента успешно отображает диалоговое окно.

...