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

发布时间：2020-12-17 06:55:07 所属栏目：安全来源：网络整理

导读：我有一个FormGroup定义如下： this.businessFormGroup: this.fb.group({ 'businessType': ['',Validators.required],'description': ['',Validators.compose([Validators.required,Validators.maxLength(200)])],'income': [''] }) 现在当businessType为Othe

我有一个FormGroup定义如下：

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

现在当businessType为Other时,我想从描述中删除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();

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

解决方法

Angular表单具有内置函数 setValidators(),可以对Validators进行编程分配.

对于您的示例,您可以：

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)]);               
}

重要的是要记住,通过使用此方法,您将覆盖现有的验证器,因此您需要包含您正在重置的控件所需的所有验证器.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!