Displaying error messages from server

[chrisworrell]

I am trying to figure out how to display error messages from the server. For example if I try to save something and I get a response that the name is a duplicate (or any other server side validation failed)

Basically when the submit ajax is fired if I get a 422 i then want to loop through the returned errors and then set the appropriate control to an error and then display the message.

Something along the lines of below. It sets the control red and does all that, but I dont know how to get the message to display under the control (err[field] is the message). I have the errors returning as {field: message}

err => {
                    for ( const field in err) {
                        this.form.controls[field].setErrors({"error": err[field]});
                    }
                    
                }

[third774]

@chrisworrell - Can you please post a more complete example of your implementation?

Have you created async validators?

https://angular.io/guide/form-validation#validator-functions

[chrisworrell]

I figured out how, i just needed to use the CustomError messages area and name things properly

[third774]

Glad to hear it! 😀