0

Подскажите пожалуйста, где я ошибся. Написал кастомный валидатор для проверки пароля, но работает он не так как я задумал. Ожидал, что при вводе в поле Confirm password пароль будет невалиден, если пароли не совпадают. Но выходит, что поле Сonfirm password валидно при вводе абсолютно любого символа.

app.component.ts

  ngOnInit(): void {
    this.form = new FormGroup({
      //...
      password: new FormControl('', [
        Validators.required,
        Validators.minLength(5),
        Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z])(?=[^#$_\-+!]*[#$_\-+!]).{5,}$/),
      ]),
      confirmPassword: new FormControl('', [
        Validators.required,
      ]),
    }, {validators: this.passwordMatchValidator});
  }

  passwordMatchValidator(form: FormGroup) {
    return form.value.password === form.value.confirmPassword ? null : { mismatch: true};
  }

app.component.html
div class="container">
  <form class="auth-form"
        [formGroup]="form" (ngSubmit)="submit()">
    <h1>Registration new User</h1>
    <div class="form-control">
        <label>Password:
          <input class="form-input" type="password" name="password"
           formControlName="password"
    pattern="^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z])(?=[^#$_\-+!]*[#$_\-+!]).{5,}$">
       </label>
       <div *ngIf="form.get('password').invalid && form.get('password').touched"
           class="validation">
        <small *ngIf="form.get('password').errors.required">
          The password field is required. </small>
        <small *ngIf="form.get('password').errors.minlength">
          The password must be at least {{form.get('password').errors.minlength["requiredLength"]}} characters.
        </small>
        <br>
        <small *ngIf="form.get('password').errors.pattern">
          The password must include uppercase and lowercase letters, numbers, and one of symbols: '_' '!' '#' '+' '-' '$'
        </small>
      </div>
    </div>

    <div class="form-control">
      <label>Confirm password:
        <input class="form-input" type="password" name="confirmPassword"  formControlName="confirmPassword"></label>
      <div *ngIf="form.get('confirmPassword').invalid && form.get('confirmPassword').touched"
           class="validation">
        <small *ngIf="form.get('confirmPassword').errors.required">
          The Confirm Password field is required.
        </small>
        <small *ngIf="form.errors || form.get('confirmPassword').errors.mismatch">
          Password doesn't match.
        </small>

      </div>
    </div>

<button class="btn" type="submit">Submit</button>

ссылка на stackblitz https://stackblitz.com/edit/angular-bvrnrf?embed=1&file=src/app/app.component.ts

3
  • а почему оно должно быть не валидно? С контролом слинкован 1 валидатор required 9 апр 2020 в 6:39
  • Подскажите пожалуйста новичку, первую неделю на ангуляре пишу. Т.е. когда указан этот валидатор {validators: this.passwordMatchValidator}, он не распространяется на поле confirmPassword? Не понимаю тогда, как для confirmPassword должен выглядеть нормальный валидатор? 9 апр 2020 в 10:46
  • Если я добавляю те же валидаторы, что и в password - Validators.minLength(5) и Validators.pattern(/^...$/), всё равно могу в поле confirmPassword вписать любой другой пароль, и он считает его валидным, даже если они с password разные 9 апр 2020 в 10:54

1 ответ 1

0

Я решил сделать C реактивной формой Angular и как советуют с FormBuilder Вот код:

export class RegistrationComponent implements OnInit {
  formReg: FormGroup;
constructor(private fb: FormBuilder, private authService: AuthService { this._createForm(); }

  private _createForm() {
    this.formReg = this.fb.group({
      username: ['', [
        Validators.required,
        Validators.minLength(2),
        Validators.pattern('[A-Za-z0-9]*')
      ]],
      password: [
        '',
        [ Validators.required,
          Validators.minLength(3),
          Validators.pattern('[A-Za-z0-9]*')
        ]
      ]
    });
  }
  get  _username() {return this.formReg.get('username'); }
  get  _password() {return this.formReg.get('password'); }

  ngOnInit() {...}

и мой html

<form [formGroup]="formReg" >
    <div class="form-group">
      <label for="username">username </label>
      <input type="username" name="username" id="username" formControlName="username" class="form-control"
             aria-describedby="usernameHelp" placeholder="Enter username" required>
      <br><small id="usernameHelp" class="form-text text-muted">you username account</small>
      <div *ngIf="_username.invalid && (_username.dirty || _username.touched)" class="alert alert-danger"></div>
      <div *ngIf="_username.errors?.required">Обязательное поле</div>
      <div *ngIf="_username.errors?.minlength">Введите не менее 2 символов</div>
      <span *ngIf="_username.errors?.pattern">Неразрешенные символы</span>
 </div>  

тоже самое и для password

2
  • Благодарю за помощь :) 12 апр 2020 в 18:41
  • рад помочь! если воспользовались и все работает можете проголосовать за мой ответ! я тут новичок думаю мне не помешает. успехов
    – user377826
    13 апр 2020 в 22:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.