表单组验证器正在覆盖 Angular 10 中的表单控件验证器

分享于2022年12月29日 angular angular-reactive-forms angular10 customvalidator validation 问答
【问题标题】:Form group validator is overriding the form control validator in Angular 10表单组验证器正在覆盖 Angular 10 中的表单控件验证器
【发布时间】:2022-12-22 22:55:25
【问题描述】:

我正在使用 angular 10 反应形式。我有大约 5 个表单控件。每个都有自己的验证。 我还需要比较两个表单控件的值,并根据输入值,需要为这两个控件分配错误。 所以我添加了一个表单组自定义验证器。 但这在关注的两种形式控制上覆盖了单个验证器。其他表单控件的各个验证器工作正常。

我在 Anuradha Gunasekara 的帖子中使用了类似于所选答案的结构:

Angular - assign custom validator to a FormGroup

然而,设置 设置错误(空) 在自定义验证器中删除在单个 formControl 级别添加的验证。

有没有其他方法可以仅删除该特定错误? 抱歉,如果不够清楚,这是我的第一篇文章。如果需要任何进一步的上下文,请告诉我,谢谢。

  • 请提供足够的代码,以便其他人可以更好地理解或重现问题。
  • 你能在这里添加一个 stackblitz 示例来解决你的问题吗?

【解决方案1】:

我在使用 angular 11 时面临完全相同的问题。

这是一个代码示例:

        this.identifierForm = this.formBuilder.group({
            id: [],
            type: [null, Validators.required],
            value: [null, Validators.required],
            validFrom: [],
            validUntil: [],
            authority: [null, Validators.required],
        });
        this.identifierForm.setValidators(
            FormValidator.dateOrderValidator(
                this.identifierForm,
                'validFrom',
                'validUntil',
                this.i18nService
            )
        );

所以我有一个包含 6 个控件的表单组,其中 3 个有一个必需的验证器。而且我想在全球范围内验证我的表单以检查是否正确描述了日期期间,我向我的表单组添加了一个验证器。

这导致只有表单组验证器工作。表单控件验证器被省略了。 如果我删除我的表单组验证器,我的表单控件验证器中的一切都运行良好。

如何在不覆盖包含的表单控件验证器的情况下将验证器“添加”到我的表单组?

我看到 angular 12 向 FormGroup 添加了“addValidators”方法,但我目前无法使用此版本。

【讨论】: