Question

是否可以使用自定义验证器将表单字段的输入与列表进行比较？我不是要互相比较两个窗体控件。

我一直在尝试这种方法：

this.formGroupName = this.formBuilder.group({
    category: ['', Validators.compose([Validators.required, this.checkCategoryInput(
      this.formGroupName.get['category'].value, this.categoryList)])]
});

在checkCategoryInput()方法中，我将把“类别”表单控件的值与可接受类别的列表进行比较。

public checkCategoryInput(input: string, categoryList: any[]): {[key: string]: boolean} | null{
  console.log(input);
  console.log(categoryList);
  return null;
}

但是，我迷失了语法，并在尝试使用这种方法时遇到了一些错误。有谁有更好的方法将表单控件值与列表进行比较？？

Answer 1

您接近，您说对了；语法有点混乱。自定义Validator应该是一个ValidatorFn方法，它将使用参数AbstractControl进行调用。例如，这是一个非常基本的验证器：

public static numeric(control: AbstractControl): { [key: string]: any } {
    return /^[0-9]+$/.test(control.value) ? null : { 'numeric': false };
}

// .. { category: [0, Validators.required, numeric] }

我们只是将方法的引用传递给FormBuilder，它将调用传递的FormControl来验证值。

如果要使用验证器包装一些自己的参数，只需创建自己的函数范围并返回一个新方法：

public static checkCategoryInput(input: string, categoryList: any[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        const val = control.value;
        return 'Do stuff with the value because `input` and `categoryList` are now in scope!'
    }
}

只是一些额外的信息，因为它在任何地方都不能很好地说明； { [key: string]: boolean } | null的返回签名就是errors的{{1}}属性上的内容，因此通常返回ngControl（如果有效）和null（如果无效）。如果您尝试显示基于此特定验证程序的错误消息，请记住这一点。

如何针对角度为5的反应形式的列表验证FormControl值

1 个答案: