Tengo un FormGroup definido como a continuación:
this.businessFormGroup: this.fb.group({ 'businessType': ['', Validators.required], 'description': ['', Validators.compose([Validators.required, Validators.maxLength(200)])], 'income': [''] }) Ahora, cuando businessType es Other , quiero eliminar el validador Validators.required de description . Y si businessType no es Other , quiero volver a agregar Validators.required .
Estoy usando el siguiente código para agregar/eliminar dinámicamente Validators.required . Sin embargo, borra el validador Validators.maxLength existente.
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(); Mi pregunta es, ¿cómo puedo conservar los validadores existentes al agregar/eliminar el validador required ?
Si está usando Angular 12.2 o superior, puede usar los métodos de AbstractControl addValidators , removeValidators y hasValidator , según los documentos :
if(this.businessFormGroup.get('businessType').value !== 'Other'){ this.businessFormGroup.get('description').addValidators(Validators.required); } else { this.businessFormGroup.get('description').clearValidators(); }Para versiones anteriores, los formularios angulares tienen una función integrada setValidators() que permite la asignación programática de validadores. Sin embargo, esto sobrescribirá sus validadores.
Para tu ejemplo puedes hacer:
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();Es importante tener en cuenta que al usar este método sobrescribirá sus validadores existentes , por lo que deberá incluir todos los validadores que necesite/quiera para el control que está reiniciando.
este me funciono
onAddValidationClick(){ this.formGroup.controls["firstName"].setValidators(Validators.required); this.formGroup.controls["firstName"].updateValueAndValidity(); } onRemoveValidationClick(){ this.formGroup.controls["firstName"].clearValidators(); this.formGroup.controls["firstName"].updateValueAndValidity(); }Si cambia el "validador requerido" más de una vez (por ejemplo, usando una casilla de verificación), debe agregar esto:
this.formGroup.controls["firstName"].setErrors(null);Asi que:
onAddValidationClick(){ this.formGroup.controls["firstName"].setValidators(Validators.required); this.formGroup.controls["firstName"].updateValueAndValidity(); } onRemoveValidationClick(){ this.formGroup.controls["firstName"].setErrors(null); this.formGroup.controls["firstName"].clearValidators(); this.formGroup.controls["firstName"].updateValueAndValidity(); }