本文介绍了Angular - 动态添加/删除验证器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 FormGroup 定义如下:

I have a FormGroup defined like below:

this.businessFormGroup: this.fb.group({
    'businessType': ['', Validators.required],
    'description': ['', Validators.compose([Validators.required, Validators.maxLength(200)])],
    'income': ['']
  })

现在当 businessTypeOther 时,我想从 description 中删除 Validators.required 验证器.如果 businessType 不是 Other,我想添加回 Validators.required.

Now when businessType is Other , I want to remove Validators.required validator from description. And if businessType is not Other, I want to add back the Validators.required.

我正在使用以下代码动态添加/删除 Validators.required.但是,它会清除现有的 Validators.maxLength 验证器.

I am using the below code to dynamically add/remove the Validators.required. However, it clears the existing Validators.maxLength validator.

if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.get('description').validator = <any>Validators.compose([Validators.required]);               
} else {                
    this.businessFormGroup.get('description').clearValidators();               
}

this.businessFormGroup.get('description').updateValueAndValidity(); 

我的问题是,如何在添加/删除 required 验证器时保留现有的验证器.

My question is, how can I retain the existing validators when adding/removing the required validator.

推荐答案

如果您使用的是 Angular 12.2 或更高版本,您可以使用 AbstractControl 方法 addValidatorsremoveValidatorshasValidator根据文档:

If you are using Angular 12.2 or higher, you can use the AbstractControl methods addValidators, removeValidators, and hasValidator, as per the docs:

if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.get('description').addValidators(Validators.required);               
} else {                
    this.businessFormGroup.get('description').clearValidators();               
}

对于旧版本,Angular 表单有一个内置函数 setValidators() 可以启用验证器的编程分配.但是,这会覆盖您的验证器.

For older versions, Angular forms have a built in function setValidators() that enables programmatic assignment of Validators. However, this will overwrite your validators.

对于您的示例,您可以:

For your example you can do:

if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.controls['description'].setValidators([Validators.required, Validators.maxLength(200)]);              
} else {                
    this.businessFormGroup.controls['description'].setValidators([Validators.maxLength(200)]);               
}
this.businessFormGroup.controls['description'].updateValueAndValidity();

请务必记住,通过使用此方法,您将覆盖现有的验证器,因此您需要包含您要重置的控件所需/想要的所有验证器.

It is important to keep in mind that by using this method you will overwrite your existing validators so you will need to include all the validators you need/want for the control that you are resetting.

这篇关于Angular - 动态添加/删除验证器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-25 18:21