如何根据表单中的列表验证FormControl值

Question

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

我一直在尝试这种方法：

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

其中，在检查类别输入（）方法中，我将比较类别表单控件的值与可接受类别的列表。

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

然而，我在语法中迷失了方向，并在尝试用这种方法时出现了一些错误。有人有更好的方法将表单控件值与列表进行比较吗？？？

Answer 1

你很接近，你是对的；语法有点混乱。自定义验证器应该是一个验证器fn方法，该方法将使用参数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的返回签名将放在ngControl的errors属性上，因此如果它有效，通常返回null，如果无效，则返回errorName:false。如果您试图显示基于此特定验证器的错误消息，请记住这一点。