Question

我的角度项目中有一个反应式，其定义如下：

this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
});

如何检查密码和ConfirmPassword的匹配？

Answer 1

您可以创建自定义验证器，并在

之类的FormGroup中使用它

    passwordConfirming(c: AbstractControl): { invalid: boolean } {
    if (c.get('password').value !== c.get('confirmPassword').value) {
        return {invalid: true};
    }
}

您需要使用类似的自定义验证器。

 this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
},{validator: this.passwordConfirming});

并像

一样签入html

 <span *ngIf="createUserFormGroup.errors?.invalid">
      Password doesn't match
  </span>

Answer 2

对于angular 7+，您可以为表格添加自定义密码匹配验证器：

private passwordsMatchValidator(form: FormGroup) {
    if (form.get('password') && form.get('confirmPassword')) {
        return form.get('password').value === form.get('confirmPassword').value ? null : { mismatch: true };
    }
    return null;
}

然后在创建表单时将其添加为自定义验证器：

this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
}, this.passwordsMatchValidator);

Answer 3

我直接使用了@rxweb/reactive-form-validators的compare验证程序，而没有创建自定义函数并在组件中编写了太多代码。

安装：

npm i @rxweb/reactive-form-validators

我比较了confirmPassword字段，并提到了fieldName参数。这是组件代码。

 ngOnInit() {
    this.userFormGroup = this.formBuilder.group({
        password:['',], 
        confirmPassword:['', RxwebValidators.compare({fieldName:'password' })], 
    });
}

这是完整的app.component.ts代码，您可以在其中通过像这样全局声明它来显示错误消息。

ReactiveFormConfig.set({"validationMessage":{"compare":"Input does not match"}});

这是完整的HTML代码。

<div>
  <form  [formGroup]="userFormGroup">
    <div class="form-group">
      <label>Password</label>
      <input type="text" formControlName="password" class="form-control"  />
     <small class="form-text text-danger" *ngIf="userFormGroup.controls.password.errors">{{userFormGroup.controls.password.errors.compare.message}}<br/></small>    
    </div>
    <div class="form-group">
      <label>Confirm Password</label>
      <input type="text" formControlName="confirmPassword" class="form-control"  />
    <small class="form-text text-danger" *ngIf="userFormGroup.controls.confirmPasswossrd.errors">{{userFormGroup.controls.confirmPassword.errors.compare.message}}<br/></small>
    </div>
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

Working Example

角度8：反应形式匹配密码

3 个答案: