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

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

我一直在尝试这种方法：

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

其中，在

checkCategoryInput（）

方法中，我将比较“category”表单控件的值与可接受类别的列表

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

---

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

你很接近，你是对的；语法有点混乱。自定义

验证器

应该是一个

验证器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

。如果您试图显示基于此特定验证器的错误消息，请记住这一点。

您会遇到哪些错误？你在做什么比较？你的意思是，你想检查列表中是否存在formcontrol值吗？你有没有在@masu9中使用过它？@TR3B你好，是的，我有-但是我使用了不同的方法。我发现订阅表单控件的valueChanges属性更容易，然后自己使用.setErrors（{'invalid'：true}）手动设置错误；例如你可以在这里查看这个帖子：非常感谢你的回复。我只是得到最后一个错误，我希望你能帮助我。我收到错误：

无法读取未定义的

的“get”属性。我相信这是因为我如何将类别控制值传递到参数中。你能看出我的语法有什么错误吗？（我问题中的第一个代码片段）