时间戳

首页 > 解决方案 > Angular：表单验证 - 匹配的密码不起作用

angular - Angular：表单验证 - 匹配的密码不起作用

问题描述

我只是在创建带有一些基本验证的注册表单

我的代码：

注册.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>

除匹配的密码验证外，所有验证均正常工作。

我做错什么了吗？

任何建议表示赞赏。

标签： angulartypescriptvalidationhtml5-validation

解决方案

您可以删除第二个验证条件。

<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>

在提交按钮上，您应该添加一个条件，因为匹配密码不是核心验证。IE;

<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>

推荐阅读