我有一个FormGroup的定义如下:

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加回go .

我使用下面的代码动态添加/删除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验证器时,如何保留现有的验证器.

推荐答案

如果使用的Angular 为12.2或更高,则可以使用AbstractControl方法addValidatorsremoveValidatorshasValidator,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 forms有一个内置函数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();

记住by using this method you will overwrite your existing validators是很重要的,所以你需要包括所有你需要/想要重置的控件的验证器.

Angular相关问答推荐

无法绑定到ngIf,因为它不是dis angular 17的已知属性

如何在自定义验证器中获取所有表单控件(字段组动态创建)

HttpInterceptorFn在Angular 17中被忽略

使选项卡与父零部件成一定Angular 激活

AOS中的数据绑定--可能吗?

截获火灾前调用公共接口

react 形式之间的循环关系

如何将 Firebase 云消息传递 (FCM) 与 Angular 15 结合使用?

Angular 15 在 URL 中使用@进行路由

升级到 Webpack 5.79.0 后 NX Angular 项目构建失败

在ngOninit方法中直接VS初始化属性

Angular 在关闭另一个对话框后打开另一个对话框的最佳做法是什么?

模块内的命名路由出口 - 路径匹配但内容未加载

Angular JWT Token 被添加到lazyUpdate 而不是 HttpHeaders 中的标头

Angular keypress 存储空间而不是第一个字母

我应该在 Jasmine 3 中使用什么来代替 fit 和 fdescribe?

Angular2 Material Dialog css,对话框大小

如何在 Angular 2 中获取与 ElementRef 关联的组件的引用

EmptyError: no elements in sequence

Angular ngClass 和单击事件以切换类