角度：表单验证 - 匹配的密码不起作用

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验证相等的包

npm i ng-validate-equal

步骤#2：

在模块.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>