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

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

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

在你的 module.ts 中导入 "ValidateEqualModule" 并将其添加到 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>