Angular响应式表单控件：如何将输入值作为验证器参数传递

在Angular表单体系中，第三方npm包提供的验证器（如你使用的isValidIPv4String）会自动接收表单控件实例，进而获取输入值，无需手动传递输入值。你的代码核心问题是错误地直接调用了验证器函数，而非传递验证器函数本身（或工厂函数返回的验证器）。

正确用法分两种场景： #

• 如果验证器是无参数的标准验证器函数：直接传递函数引用即可，验证器内部会自动读取控件的输入值：

this.formGroup.addControl('tunic', this.formBuilder.control('', [
  Validators.required,
  Validators.maxLength(15),
  Validator.isValidIPv4String // 注意：不要加括号和参数，直接传函数本身
]));

• 如果验证器是支持额外配置的工厂函数：调用工厂函数并传入所需配置参数，返回的验证器函数会自动获取控件输入值：

// 假设第三方验证器支持传入自定义错误提示的工厂函数
this.formGroup.addControl('tunic', this.formBuilder.control('', [
  Validators.required,
  Validators.maxLength(15),
  Validator.isValidIPv4String('请输入有效的IPv4地址') // 传配置参数，验证器内部自动读取输入值
]));

原写法的问题说明： #

你之前的代码Validator.isValidIPv4String('HowToPassTheValueHere?')是直接执行了验证器函数，把函数执行后的结果（而非验证器函数本身）传给了表单控件。而Angular要求验证器必须是(control: AbstractControl) => ValidationErrors | null类型的函数，用于在表单值变化时自动触发验证逻辑。

内容的提问来源于stack exchange，提问作者Babulaas