如何使用自定义验证程序语法解决遇到的错误? [英] How do I resolve the error I am encountering using custom Validator syntax?

问题描述

我正在尝试创建一个自定义验证器，该验证器将比较两个应该匹配的密码，如果它们不匹配，则应禁用一个按钮，并且如果这样做，则用户可以完成注册.

I am trying to create a custom validator that will compare two passwords that should match, if they do not match a button should be disabled and if they do the user can complete registration.

在搜索堆栈溢出并浏览其他站点之后，我重写了定制​​验证器以匹配先前提供的答案；但是，它们似乎都没有对我遇到的错误产生任何影响.

After searching Stack Overflow, and looking through other sites I have rewritten the custom made validator to match previously provided answers; However, none of them seem to have any effect on the error I am encountering.

进口

import { FormControl, Validators, FormGroup, ValidatorFn, AbstractControl } from "@angular/forms";
import { Component } from "@angular/core";
import { MatButton } from "@angular/material";

FormGroup

FormGroup

registerForm = new FormGroup({
    first: new FormControl(null, [
      Validators.required,
    ]),
    last: new FormControl(null, [
      Validators.required,
    ]),
    id: new FormControl(null, [
      Validators.required,
    ]),
    email: new FormControl(null, [
      Validators.required,
      Validators.email
    ]),
    newpass: new FormControl(null, [
      Validators.required,
      this.ageRangeValidator
    ]),
    confirmpass: new FormControl(null, [
      Validators.required,
      this.ageRangeValidator
    ]),
  }, {this.matchingPasswords} );

CustomValidator

CustomValidator

matchingPasswords(c: AbstractControl): {[key: string]: any} {
    let password = c.get(['passwords']);
    let confirmPassword = c.get(['confirmpwd']);

    if (password.value !== confirmPassword.value) {
      return { mismatchedPasswords: true };
    }
    return null;
  }

当我尝试运行此代码时，遇到以下错误.

As I attempt to run this code I run into the following error.

类型'{的参数:this:any;}'不能分配给'ValidatorFn |类型的参数.ValidatorFn [] |AbstractControlOptions".对象文字只能指定已知的属性，类型'ValidatorFn |中不存在'this'.ValidatorFn [] |AbstractControlOptions'.ts(2345)

Argument of type '{ this: any; }' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'. Object literal may only specify known properties, and 'this' does not exist in type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'.ts(2345)

这是针对学校高级项目的.

This is for a school senior project.

推荐答案

您不仅要返回具有null属性的对象，还返回null或ValidatorError.更改您的matchingPasswords方法的属性类型返回:

You are returning null or a ValidatorError not only an object with an any property. Change the property type return of your matchingPasswords method:

matchingPasswords(c: AbstractControl): ValidationErrors | null {
    let password = c.get(['passwords']);
    let confirmPassword = c.get(['confirmpwd']);

    if (password.value !== confirmPassword.value) {
      return { mismatchedPasswords: true };
    }
    return null;
  }

对于html参考，我将检查控件是否有任何错误，并验证是否由于密码不匹配而导致错误:

For the html reference i would check if the control had any errors and validate whether that is due to the password not match instead being required:

<div *ngIf="registerForm.get('confirmpwd').errors && registerForm.get('confirmpwd').errors['mismatchedPasswords']">
   Passwords do not match
</div>

这篇关于如何使用自定义验证程序语法解决遇到的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！