在angular2中向FormGroup添加多个验证器

Posted 2023-03-13

【中文标题】在angular2中向FormGroup添加多个验证器

【英文标题】：Adding multiple validators to FormGroup in angular2

【发布时间】：2016-11-27 05:57:52

【问题描述】：

如何将多个验证器添加到 FormGroup。

FormControl 可以接受验证器数组，但 FormGroup 不能。除了创建单个自定义验证器之外，还有其他解决方法吗？

我正在使用 rc4。

【问题讨论】：

也许通过 Validators.compose？

是的，这就是我想要做的，但我在编译过程中遇到了一个奇怪的错误。前任。 let myGroup = this.formBuilder.group(, validator: Validators.compose([this.myCustomValidator(variable1, variable2)])); 只是为了让您了解 myCustomValidator 的作用，它返回一个验证器函数 return (group: FormGroup): [s: string]: boolean => 我得到的错误是：Argument of type '((group: FormGroup) => [s: string]: boolean; )[]' is not assignable to parameter of type 'ValidatorFn[]'.

顺便说一句，自定义验证器本身可以正常工作，如下所示：let myGroup = this.formBuilder.group(, validator: this.myCustomValidator(variable1, variable2));

@DavidBulte 毕竟我能够让它与 Validators.compose 一起工作。我从“@angular/core”而不是“@angular/forms”导入验证器。如果您将其发布为答案，我会接受。

谢谢 maxim。很高兴它有效。

【参考方案1】：

可以通过Validators.compose()组合多个验证器。

来自api reference：

compose(validators: ValidatorFn[]) : ValidatorFn

将多个验证器组合成一个函数，该函数返回单个错误映射的联合。

【讨论】：

文档链接已损坏，但答案仍然有效

对我不起作用。 validator: Validators.compose( [ this.validationFn1.bind(this), this.validationFn2.bind(this) ] )

【参考方案2】：

实际上，FormGroup 确实接受了验证器数组。只是界面没有更新。将其投射到任何都可以。例如

<any>[Validators.required, Validators.minlength(2)]

【讨论】：

刚刚尝试过，虽然它不会抛出错误，但由于某种原因，只有一个验证器可以工作。你使用 FormBuilder.group 还是仅仅使用 FormGroup？

您找到解决方案了吗？ @马克西姆

@PriteshAcharya 我刚刚使用了 Validators.compose()。还要记住，这个问题是关于 Angular RC4 的，现在它在 Angular 4 上，我已经转向 Vue。

我只使用了两个验证器（必需，最大长度），它对我有用