Angular：验证器是否会删除并重新分配值更改时的错误（当它们运行时）？

Question

我创建了以下自定义组验证器，用于检查密码是否匹配。效果很好，但我不知道为什么会这样。

export class CustomGroupValidators {
   static matchFields(field1: string, field2: string, errorKey: string): ValidatorFn {
      return (group: AbstractControl): ValidationErrors | null => {
         const firstField = group.get(field1);
         const secondField = group.get(field2);

         if (firstField?.value !== secondField?.value) {
            secondField?.setErrors({ mismatch: true });
            return { [errorKey]: true };
         } else {
            return null;
         }
      };
   };
}

如果 matchFields 验证器本身 returns 出错，验证器还会为第二个字段设置错误，以便我可以向用户提供反馈。

如您所见，我没有清除或重置任何错误，但是当第一个和第二个字段匹配时验证工作正常并且第二个字段有效 - 按照我的意愿。这是否意味着每当验证器运行s（在字段或组上）时，它都会清除所有错误并重新评估/重新附加所需的错误？否则，为什么我不会遇到一个错误，即当先前值导致设置错误但当前值良好时，“不匹配”错误仍然为真？

另外，我也不清楚一般情况下验证器运行在哪些事件下。我知道他们运行会改变价值，但是除此之外还有其他情况下他们运行吗？

Answer 1

分配给 AbstractControl 的所有验证器都会重新运行每次控件值更改并且控件启用时。

请注意，更改遍历树，因此更改 FormGroup 内的 FormControl 将更改控件和组的值 - FormControl 优先。

This 是代码的一部分，负责在值更改时运行验证器。

因此，在您的情况下，angular 将首先在您的 secondField 上运行个验证器。如果没有验证器（或验证器返回 null），错误数组为空，状态设置为 VALID。

然后，您的 FormGroup 也会发生同样的情况 - 组中的错误已清除，并且您的验证器是运行。

Answer 2

补充我的评论，“customGroupValidators 需要在字段匹配时使用 setErrors(null)。我想这两个字段有 Validators.required，只有在有值

时才设置为 null

export class CustomGroupValidators {
   static matchFields(field1: string, field2: string, errorKey: string): ValidatorFn {
      return (group: AbstractControl): ValidationErrors | null => {
         const firstField = group.get(field1);
         const secondField = group.get(field2);

         if (firstField?.value !== secondField?.value) {
            secondField?.setErrors({ mismatch: true });
            return { [errorKey]: true };
         } else {
            
            if (secondField?.value) //<--if match and secondField has value
                secondField?.setErrors(null); //<--setErrors to null

            return null;
         }
      };
   };
}

假设我们编辑“第二个字段”。 Angular检查“第二个字段”，根据是否有效给出错误并执行FormGroup Validator来验证FormGroup（如果不匹配则更改错误）

假设我们编辑“第一个字段”。 Angular 检查“第一个字段”，根据是否有效给出错误并执行 FromGroup 验证器来验证使用 setErrors({[errorKey]} is not match 和 setErrors(null) if match and第二个字段有值。

Angular：验证器是否会删除并重新分配值更改时的错误（当它们运行时）？

Angular: Do validators remove and re-assign errors on value changes (when they run)?

angular-validation

angular

Angular：验证器是否会删除并重新分配值更改时的错误（当它们 运行 时）？

Angular: Do validators remove and re-assign errors on value changes (when they run)?

angular-validation

angular

Angular：验证器是否会删除并重新分配值更改时的错误（当它们运行时）？