0

Dependencies used

"@angular/cli": "^11.2.10",
"@ngx-formly/bootstrap": "^5.10.22",
"@ngx-formly/core": "^5.10.22"

There is an issue with the formly form validation classes when we remove the validator from the already touched field. Form-field-image enter image description here I have a formly form with three fields. In the Initial stage, every field is a mandatory field. Password and Public Key fields are related to each other. If there is a value in the Password then the Public Key field needs to be disabled and no need for validators for Public Key and vice versa.

If I touched the Password field and do not add any value in the field will show a validator error. Then adding value in the Public key field will disable the Password Field and * symbol and the Validation message gets removed. But the red-color border remains the same and the form is also invalid in these cases.

I noticed that the is-invalid class name was not removed from the disabled field. Also, there is a has-error class in the parent div of the input field. You can see the class names in the image div_with_has-error

I also used expression properties, the same issue also there.

expressionProperties: {
'templateOptions.disabled': () => {
return this.model.sftpPassword != undefined && this.model.sftpPassword != ""
},
'templateOptions.required': (model: any, formState: any) => {
return formState.mainModel.sftpPassword == undefined || formState.mainModel.sftpPassword == "";
},
},
2
  • Did you use updateValueAndValidity() after clearValidators()? Mar 17, 2022 at 12:20
  • @MishaMashina I also tried the updateValueAndValidity() after clearValidators(). The has-error class name not removed from the input.
    – AREH
    Mar 17, 2022 at 13:45

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.