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

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

0 голосов
/ 03 декабря 2018

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

Мой код:

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>

Все проверки работают, кроме соответствующего пароляпроверка.

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

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

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

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

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

0 голосов
/ 03 декабря 2018

Вы можете удалить 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>
...