Angular：添加到现有的一组验证器 Formcontrol答案

【问题标题】：Angular: Add to Existing Set of Validators FormcontrolAngular：添加到现有的一组验证器 Formcontrol
【发布时间】：2020-11-26 08:02:27
【问题描述】：

如何在 FormControl 上添加或推送到现有的一组验证器？我想添加为数组。以下答案只会一次设置它们。

In Angular, how to add Validator to FormControl after control is created?

Angular - Dynamically add/remove validators

newFormControl.setValidators([Validators.required])
newFormControl.setValidators([Validators.pattern("^[0-9]*$")])
newFormControl.setValidators([Validators.maxLength])

【问题讨论】：

标签： angular typescript angular-reactive-forms angular10

【解决方案1】：

setValidators() 移除之前的验证器，因此您可能希望单独收集验证器，例如将它们保存在两个变量中，并根据需要使用一个 setValidators() 设置它们。


    const validators1 = [Validators.required, Validators.pattern("^[0-9]*$"), Validators.maxLength(10)])]
    const validators2 = [Validators.required]

    if( if_you_want_all_three_validators ){
        newFormControl.setValidators(validators1)
    } else {
        // by default you want only one validator:
        newFormControl.setValidators(validators2)
    }

所以这样你就不需要一一设置了。

（由于验证器未存储在 setValidators() 内部的数组中，因此您必须通过一次调用将所有验证器发送到 setValidators。）

【讨论】：

我知道，这就是我想要做的，我如何累积设置它们？还没回答我的问题，谢谢
不幸的是，您可能不会累积设置它们，因为 setValidators() 每次调用时都会生成一个 NEW FUNCTION。因此，当您调用 setValidators() 时，旧的验证器不再可用。也许有一个 hack 来获取旧的验证器函数，并将其与新的验证器一起使用，但这会导致一个非常长的验证器函数链......并且可能会出现堆栈错误。
（还要注意maxLength需要一个参数）
嗨，有没有办法初始化一个数组并一次性推送它们？这行得通吗？让 test = new Array(); test.push(Validators.required) test.push(Validators.minLength(10)) test.push(Validators.maxLength(10)), test.push(Validators.pattern("^[0-9]*$") ) 我会测试一下吗？
随意测试，我可以发积分，看来对我有用，谢谢！

【解决方案2】：

您可以使用new Array<ValidatorFn>(); 设置一个数组，并在下面单独推送验证器。

let validatorList = new Array<ValidatorFn>();
validatorList.push(Validators.required);
validatorList.push(Validators.pattern("^[0-9]*$"));
validatorList.push(Validators.maxLength(item.characterLimit));
newForm.addControl('test', new FormControl(d'5', validatorList));

【讨论】：