angular - 如何根据 Angular 5 react 形式的列表验证 FormControl 值

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 是将放在 ngControl 的 errors 属性上的内容，所以如果有效，通常返回 null 和 errorName: false 如果无效。如果您尝试显示基于此特定验证器的错误消息，请牢记这一点。