Angular - 动态添加/删除验证器

Question

我有一个 FormGroup 定义如下:

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

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

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

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 验证器时保留现有验证器。

Answer 1

如果您使用的是 Angular 12.2 或更高版本，则可以使用 AbstractControl 方法 addValidators、removeValidators 和 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()启用验证器的编程分配。但是，这将覆盖您的验证器。

对于您的示例，您可以执行以下操作:

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();

重要的是要记住，通过使用此方法，您将覆盖现有的验证器，因此您将需要为要重置的控件包含所有需要/想要的验证器。