Add server side errors to form in Angular

Question

I have the following Angular 7 Component:

export class SendMessageComponent implements OnInit { 

  message: FormGroup;

  constructor(private formBuilder: FormBuilder, private messageService: MessageService) { }

  ngOnInit() {

    this.message = this.formBuilder.group({ 
      name: ['', Validators.required], 
      email: [''], 
      message: ['']
    });

  }

  onSubmit() {

    if (this.message.valid) {

      this.messageService.send(message).subscribe(

        (successResponse: SuccessResponse>) => { },

        (errorResponse) => {

          if (errorResponse.status === 400) {

            for (var error in errorResponse.error.errors) {

            }

          }            

        },

      );

    }

  }

}

When there are errors the server returns errorResponse.error.errors which is something like:

[
  { name: "Email", info: "Email is unavailable" }
]

I would like to add the server side errors to my form.

How can I do this?

prettyfly · Accepted Answer · 2019-02-22 11:51:29Z

4

You can use setErrors() method on the form control you want to add the error to.

e.g, for your email field:

this.message.get('email').setErrors({ error: 'A server side error' });

Stackblitz example: https://stackblitz.com/edit/angular-hq4p43

For your use-case, you can do it your loop, so long as your server returns the same Name as your FormGroup controls.

for (let error in errorResponse.error.errors) {
   this.message.get(error.name.toLowerCase()).setErrors({ error: error.info });
}

More info: https://angular.io/api/forms/AbstractControl#setErrors

answered Feb 22, 2019 at 11:51

prettyfly

3,1401 gold badge28 silver badges28 bronze badges

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

Comments

Michal Cumpl · Accepted Answer · 2019-02-22 11:47:04Z

1

You can call FormControl's setErrors() method to achieve this.

https://angular.io/api/forms/AbstractControl#setErrors

answered Feb 22, 2019 at 11:47

Michal Cumpl

1,0379 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add server side errors to form in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related