Angular 2: FormGroup: How to display custom error message

Question

Im building a frontend using Angular4. If a user submits a faulty form, an error message should be displayed.

At the moment, my error handling looks like this:

// This code is run when a response from the server is received
if ('error' in server_response) {
    for (let key in server_response.error {
      this.form.controls[key].setErrors({'error': true});
      let error_message_from_server = server_response.error[key];
    }
}

How I display the error in HTML:

<span class="error" *ngIf="field.invalid">Error: {{field.errors.error}} <br></span>

At the moment the field.invalid becomes true when a error is received, but the field.errors.error in an empty string.

Question: How can I set the field.errors.error message? This message should be the string in error_message_from_server

Please note that solving this by the use of if-statements in the HTML code is not an option. The amount of potential errors are in the hundreds.

Do you want to display the message after the server response or before the form submit ?and do you need something to be displayed near text box or any alert is fine ? — Vikhyath Maiya
– Vikhyath Maiya, Commented Aug 10, 2017 at 13:46
Sorry for not being clear. I have updated my question! The error should be displayed after the server response. The error message is received from the server. — Vingtoft
– Vingtoft, Commented Aug 10, 2017 at 13:49

Jorawar Singh · Accepted Answer · 2017-08-10 17:38:25Z

3

this.form.controls[key].setErrors({'error': true}); // key is error and value is boolean not a string

try to set a string type value

for (let key in server_response.error {
  this.form.controls[key].setErrors({'error': erver_response.error[key]});
//Calling `setErrors` will also update the validity of the parent control.
}

answered Aug 10, 2017 at 17:38

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BogdanC · Accepted Answer · 2017-08-10 14:17:08Z

2

For the error string to be available on html level, you have to declare it on your component level:

error_message_from_server: string;

Then, on your response from server, you set the message to that string:

// This code is run when a response from the server is received
if ('error' in server_response) {
    for (let key in server_response.error {
      this.form.controls[key].setErrors({'error': true});
      error_message_from_server = server_response.error[key];
    }
}

Then you bind the string into your element:

<span class="error" *ngIf="field.invalid">Error: {{error_message_from_server}} <br></span>

answered Aug 10, 2017 at 14:17

BogdanC

2,7942 gold badges26 silver badges22 bronze badges

3 Comments

Vingtoft Over a year ago

I have 100+ input fields, all of them can receive a potential error message from the server. Creating 100+ public strings sounds like a really bad solution, especially when Angular already provides a 'field.errors.error'. I need to investigate if this is the only solution. Thanks for your input.

BogdanC Over a year ago

No problem, I didn't know you have 100+ inputs.

Ryan Buening Over a year ago

@Vingtoft did you ever find a way to pass the error message from the server to the control without creating a bunch of public strings?

Collectives™ on Stack Overflow

Angular 2: FormGroup: How to display custom error message

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related