Angular: проверка формы - пароль не работает

Question

Я просто создаю регистрационную форму с некоторыми основными проверками

Мой код:

registration.html

<form #registrationForm="ngForm" (ngSubmit)="onFormSubmit()">
    ...

    <div class="form-group">
        <label for="reg_password">Pawword</label>
        <input required type="password" class="form-control" id="reg_password" name="reg_password" [(ngModel)]="register_inputs.password"
         #passwordControl="ngModel">

        <ng-container *ngIf="passwordControl.invalid && passwordControl.touched">
            <p class="error-message" *ngIf="passwordControl.errors?.required">
                Password is required!
            </p>
        </ng-container>
    </div>

    <div class="form-group">
        <label for="reg_r_password">Retype Password</label>
        <input required type="password" class="form-control" id="reg_r_password" name="reg_r_password" [(ngModel)]="register_inputs.r_password"
         #rPasswordControl="ngModel">

        <ng-container *ngIf="rPasswordControl.invalid && rPasswordControl.touched">
            <p class="error-message" *ngIf="rPasswordControl.errors?.required">
                Password confirmation is required!
            </p>
            <p class="error-message" *ngIf="(passwordControl.value != rPasswordControl.value) && !rPasswordControl.errors?.required">
                Password does not match the confirm password.
            </p>
        </ng-container>

    </div>

    ...

    <div class="row">
        <div class="col-md-12 text-center align-self-center">
            <button [disabled]="registrationForm.invalid" type="submit" class="btn btn-danger">Submit</button>
        </div>
    </div>

</form>

Все проверки работают, кроме проверки правильности пароля.

Я сделал что-то не так?

Любое предложение приветствуется.

Answer 1

Вы можете удалить 2-е условие проверки.

<p class="error-message" *ngIf="(passwordControl.value != rPasswordControl.value) && !rPasswordControl.errors?.required">
                Password does not match the confirm password.
            </p>

изменить на

<p class="error-message" *ngIf="passwordControl.value != rPasswordControl.value">
                Password does not match the confirm password.
            </p>

На кнопку отправки вы должны добавить условие, потому что соответствующий пароль не является основной проверкой. то есть;

<div class="col-md-12 text-center align-self-center">
            <button [disabled]="passwordControl.value == rPasswordControl.value && registrationForm.invalid" type="submit" class="btn btn-danger">Submit</button>
        </div>

Answer 2

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

this.form = this.fb.group({
      name:                   ['', Validators.required ],
      password: this.fb.group({
        pw1:           ['', Validators.required ],
        pw2:          ['', Validators.required ],
      }, {validator: this.matchValidator}),
    })

  private matchValidator(g: FormGroup) {
    return g.get('pw1').value == g.get('pw2').value
    ? null : {'mismatch': true};
  }

Больше о реактивных формах здесь: angular.io

Answer 3

Вы можете использовать этот пакет npm, который предоставляет именно эту функцию для полей формы на основе шаблонов.

https://www.npmjs.com/package/ng-validate-equal

Установка и использование

Шаг 1:

установить пакет ng-validate-equal

 npm i ng-validate-equal

Шаг 2:

импортируйте "ValidateEqualModule" в свой module.ts и добавьте его в массив импорта NgModule

import { ValidateEqualModule } from 'ng-validate-equal';

@NgModule({
  declarations: [],
  imports: [
    ValidateEqualModule
  ],
  providers: [],
})

Шаг 3:

• Убедитесь, что вы окружили свое поле и его поле подтверждения / повторного ввода <form> </form> тег
• Дайте своему основному полю имя
• Используйте директиву для вторичного поля и передайте имя первичного поля в директиву
• Найдите ошибку "notEqual" в массиве ошибок поля подтверждения.

<!-- form -->
<form>

<!-- password -->
<label>
  Password
</label>

<input type="password" name="passwordFieldName" placeholder="Password" #modelPassword="ngModel" [(ngModel)]="model.password">

<!-- confirm Password -->
<label>
  Confirm Password
</label>

<input type="password" ngValidateEqual="passwordFieldName" #modelConfirmPassword="ngModel" [(ngModel)]="model.confirmPassword" placeholder="Confirm Password">

<div *ngIf="(modelConfirmPassword.dirty || modelConfirmPassword.touched) && modelConfirmPassword.invalid">
    <p class="warning-text" *ngIf="modelConfirmPassword.hasError('notEqual') && modelPassword.valid">
      Passwords Don't Match
    </p>
</div>

</form>