在 Angular 9 中的两个选择上验证相同的值

Question

我是Angular的新手，这实际上是另一个程序员的代码。任何想法或将不胜感激。

我有两个带有三个选项的简单 select，我正在尝试验证它们是否具有相同的值 selected。

我创建了一个验证器来检查第二个 select 是否与第一个具有相同的值。它仅适用于第二个，但当我更改第一个 select 时，验证器不会运行或更新。

代码如下所示：

  maxTimeValidator = ( control: FormControl): { [s: string]: boolean } => {
    if (!control.value) {
      return { required: true };
    } else if ( control.value !== this.RiskForm.controls.range_min_time.value ) {
      return { differentTimeRange: true, error: true };
    }

    return {}
  }


  RiskForm: FormGroup;
  submit_error = false;
  RiskData = {
    id: [null,[]],
    range_min_time: [null, [Validators.required]],
    range_max_time: [null, [Validators.required,this.maxTimeValidator]],
  }

  ngOnInit(): void {
    // Initialice Form Data
    this.RiskForm = this.formBuilder.group(this.RiskData);
  }

我尝试创建两个验证函数/同样的问题：验证器似乎没有运行或在更改一个 select 时更新 select。

任何建议都会有所帮助，感谢您花时间提供帮助。

Answer 1

您需要一个将应用于您的表单的验证器。类似这样：

this.registerForm = this.formBuilder.group(
  {
    firstName: ["", [Validators.required]],
    lastName: ["", [Validators.required]],
    email: ["", [Validators.required, Validators.email]],
    password: ["", [Validators.required, Validators.minLength(6)]],
    confirmPassword: ["", Validators.required]
  },
  {
    // Used custom form validator name
    validator: ComparePassword("password", "confirmPassword")
  }
);


export function ComparePassword(controlName: string, matchingControlName: string) {
      return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];
        const matchingControl = formGroup.controls[matchingControlName];

        if (matchingControl.errors && !matchingControl.errors.mustMatch) {
          return;
        }

        if (control.value !== matchingControl.value) {
          matchingControl.setErrors({ mustMatch: true });
        } else {
          matchingControl.setErrors(null);
        }
      };
}

在 Angular 9 中的两个选择上验证相同的值

Validate same value on two selects in Angular 9

validation

angular-validation

angular