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
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
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 == "";
},
},