Пароль не соответствует шаблону в Angular CLI - PullRequest
Новая
       23

Пароль не соответствует шаблону в Angular CLI

0 голосов
/ 05 июля 2019

У меня проблема с проверкой пароля, я использую регулярное выражение, например; 

'(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])'

и мое поле ng-формы: 

password: ['', [Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])'), Validators.required]]

также в HTML, я получаю ввод как; 

<div class="form-group">
    <label for="password">Password</label>
    <input type="password" formControlName="password" placeholder="******" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
    <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
      <div *ngIf="f.password.errors">Invalid Password</div>
    </div>
  </div>

где f - функция, такая как; 

 get f() {
     return this.userForm.controls; 
 }

Когда я ввел пароль как: Harun123 , я получил неверный пароль. Почему это происходит?

1 Ответ

0 голосов
/ 05 июля 2019

Этот вопрос может быть решен с помощью комбинации этих двух ответов:

Итак, прежде всего, вам понадобится специальный валидатор для проверки паролей, который может выглядеть следующим образом 

checkPasswords(group: FormGroup) { // here we have the 'passwords' group
let pass = group.controls.password.value;
let confirmPass = group.controls.confirmPass.value;

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

и вы создадите группу форм для своих полей вместо двух элементов управления формой, а затем отметите этот пользовательский валидатор для вашей группы форм: 

this.myForm = this.fb.group({
password: ['', [Validators.required]],
confirmPassword: ['']
}, {validator: this.checkPasswords })

, а затем, как уже упоминалось в другом ответе, mat-errorтолько показывает, является ли FormControl недопустимым, поэтому вам нужно сопоставление состояния ошибки: 

export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | 
null): boolean {
const invalidCtrl = !!(control && control.invalid && control.parent.dirty);
const invalidParent = !!(control && control.parent && control.parent.invalid 
&& control.parent.dirty);

return (invalidCtrl || invalidParent);
 }
}

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

Затем в компоненте создайте новый ErrorStateMatcher: 

matcher = new MyErrorStateMatcher();

Наконец, шаблон будет выглядеть так: 

<form [formGroup]="myForm">
<mat-form-field>
<input matInput placeholder="New password" formControlName="password" 
required>
<mat-error *ngIf="myForm.hasError('required', 'password')">
    Please enter your new password
</mat-error>
</mat-form-field>

<mat-form-field>
<input matInput placeholder="Confirm password" 
formControlName="confirmPassword" [errorStateMatcher]="matcher">
<mat-error *ngIf="myForm.hasError('notSame')">
    Passwords do not match
</mat-error>  
</mat-form-field>
</form>

Вот демонстрация для вас с приведенным выше кодом: stackblitz

...