angular - 使用自定义验证和动态值的 Angular 表单

Question

我正在尝试创建一个自定义的反应式表单验证，它允许我传递一个数据数组来检查一个字符串是否已经存在。我能够以一种方式做到这一点，因此这将是一个表单级别的验证，但我无法让它在单个表单控件上工作。

表单级别验证

这将在整个表单上产生错误，而不仅仅是那个控件

this.myForm = this.fb.group({
  name: ['', Validators.compose([
    Validators.required,
  ]),
  ],
}, {
  validator: (formGroup: FormGroup) => this.checkStringExists(
    formGroup.controls.name,
    this.arrayOfStrings,
  ),
});

允许我接受表单控件并根据传入的数组检查它的自定义验证。

checkStringExists(formInput: AbstractControl, names: string[]): { [s: string]: boolean } {
  if (names && names.length && formInput && formInput.value) {
    const isUnique = !names.find((name) => name === formInput);
    if (isUnique) {
      return { nameExists: true };
    }
  }
  return null;
}

个人控制验证（我想这样做的方式）

这将仅在特定控件上创建错误

this.myForm = this.fb.group({
  name: ['', Validators.compose([
    Validators.required,
    this.checkStringExists(this.arrayOfStrings),
  ]),
  ],
});

允许我仅将数组作为 Validators.compose[] 的一部分的自定义验证

checkStringExists(names: string[]): ValidatorFn {
  return (formInput: AbstractControl): ValidationErrors | null => {
    if (names && names.length && formInput && formInput.value) {
      const isUnique = !names.find((name) => name === formInput);
      if (!isUnique) {
        return { nameExists: true };
      }
    }
    return null;
  };
}

此订阅设置 arrayOfStrings 的值。

mySubscription.subscribe((value: string[]) => {
    this.arrayOfStrings = value;
  })

我遇到的问题是 arrayOfStrings 可能会更新多次。如果我以第一种方式使用验证，则 arrayOfStrings 是最新的。如果我使用第二种验证方式，arrayOfStrings 是空值/初始值。

我试图让这个验证以第二种方式工作，这样我就可以基于单个控件显示验证，而不是如果整个表单都有这个错误。有谁知道我如何传递这个值并保持最新？

我还在一个单独的帮助文件中提供了验证功能，以便在整个应用程序中重用。

这是一个例子

标签： angularangular-forms

Answer 1

您的要求

从您的帖子中，您似乎有以下愿望清单：

1. 外部验证功能（用于跨应用的可重用性）。
2. 控制级别验证（以及，通过扩展，错误），而不是在表单级别。
3. 用于再次验证您的字段的动态值列表。

解决方案

以下内容是从您上面的问题中复制而来的：

checkStringExists(formInput: AbstractControl, names: string[]): { [s: string]: boolean } {
  if (names && names.length && formInput && formInput.value) {
    const isUnique = !names.find((name) => name === formInput);
    if (isUnique) {
      return { nameExists: true };
    }
  }
  return null;
}

您可以在字段级别使用它，而不是在表单的验证器部分使用它，如下所示：

// Contents could change later!
arrayOfStrings: string[] = [];

...

this.individualControlForm = this.fb.group({
  name: ['', Validators.compose([
    Validators.required,
    (control: AbstractControl) => ValidationHelper.checkStringExists(
          control, this.arrayOfStrings
    )]),
  ],
});

因为我们使用箭头函数作为我们的验证函数，所以我们this从定义函数的范围继承（这里是“调用、应用和绑定”部分的解释）。这（呵呵）意味着我们可以正常使用数组，每次调用验证函数时都使用最新的值。

如果你想减少这个调用的大小，你可以使用Eliseo 在他的回答中提到.bind(this)的函数。它会使事情变得更难阅读，但肯定会缩短创建表单的样板。选择你的毒药。

边注

如果您确实需要使用整个表单验证（例如，如果您需要考虑多个字段来确定单个字段是否有效）但希望错误显示在您可以使用的字段上

formData.form.controls['email'].setErrors({'incorrect': true});

在该特定字段（源）上手动设置错误。