使用自定义验证和动态值的角度形式

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;
  };
}

此订阅设置ArrayOfString的值。

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

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

我正在尝试以第二种方式进行验证，这样我就可以基于单个控件显示验证，而不是在整个表单都有此错误的情况下。有人知道我如何传递此值并使其保持最新吗？

我也有一个单独的辅助文件中的验证功能，用于整个应用程序的可重用性。

这里有一个例子

Answer 1

使现代化

我的坏！你可以传递一个数组，数组是一个不可变的值

  export function findArray(array){
    return (control=>{
      return array.indexOf(control.value)<0?{error:'not match'}:null
    })
  }

  array=['one','two']
  control=new FormControl(null,findArray(this.array))

你可以看到一个简单的stackblitz

实际上，验证器不能有“动态”参数。所以有些人喜欢

foolValidator(name:string)
{
   return (control:AbstractControl)=>{
        return control.value!=name?{error:'it's not the name'}:null
   }
}
name="joe"
control=new FormControl(null,foolValidator(this.name))

只考虑“joe”，而不是变量“name”的名称

您可以使用bind（this），bind更改范围，例如参见此链接

foolValidator() //see that you not pass the argument
{
   return (control:AbstractControl)=>{
        //see that you use "this.name"
        return control.value!=this.name?{error:'it's not the name'}:null
   }
}
name="joe"
control=new FormControl(null,foolValidator().bind(this))

Answer 2

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

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});

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