Highlighting field in Reactive forms that have server side errors in an Angular application

Question

I have an Angular application which has a HttpInterceptor configured to catch server side validation errors.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request)
    .pipe(
      retry(1),
      catchError((error: HttpErrorResponse) => {
      if (error.status === 400) {
          if (error.error.constructor == Object) {
            let validationErrorDictionary = error.error;
            var errors = [];
            for (var fieldName in validationErrorDictionary) {
              if (validationErrorDictionary.hasOwnProperty(fieldName)) 
              {
                let description = validationErrorDictionary[fieldName];
                errors.push(description);

              }
            }
            this.alertService.validationError(errors)
          } else {
            this.alertService.validationError([error.error])
          }
          return throwError(error);
        } 
        })
    )
}

This works well, and in my form I see my alertComponent show a list of errors that have been sent to my Alert Service.

How do I highlight the appropriate field in my reactive form?

Ie. if I have a form like this:

this.productForm = this.fb.group({
  name: [this.model.name, Validators.required],
  price: [this.model.price],
})

And price comes back with a server side error that is picked up by my interceptor, how do I display an error on that field? (In this case I'm using Angular Material)

<mat-form-field hideRequiredMarker appearance="standard">
  <mat-label>Price</mat-label>
  <input matInput maxlength="10" formControlName="price">
  <mat-error>There was an error with the price</mat-error>
</mat-form-field>

Do I get it right - you want to maipulate your css for individual formcontrols depending on server errors - not form errors? — Severin Klug
– Severin Klug, Commented May 3, 2019 at 7:17
Server form errors :-) So bascially if my client side validation passes, but server side fails, then highlight the failed form item on the front end — Robbie Mills
– Robbie Mills, Commented May 3, 2019 at 8:39

Indragith · Accepted Answer · 2019-05-03 07:18:45Z

1

Try to return the list of errors back to the component and use setErrors method in the reactive form. For setting the errors on the particular form field, use

formData.form.controls['price'].setErrors({'incorrect': true});

This will mark the form field as invalid. After this you can apply ngClass or ngStyle to highlight the particular field if it has errors.

answered May 3, 2019 at 7:18

Indragith

1,3108 silver badges10 bronze badges

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

2 Comments

Robbie Mills Over a year ago

How do you return values from an Interceptor?

Indragith Over a year ago

Instead of handling the errors logic in the interceptor, do that part while making the http request in services. Interceptors are meant to handle the logic before making the request and common errors.

Alexander · Accepted Answer · 2021-08-13 15:43:39Z

0

Setting { incorrect: true } was not enough in my case (there was no visual feedback of error) - I had to add is-invalid Bootstrap class as well:

  <input
    #formValidToDatepicker="ngbDatepicker"
    ngbDatepicker
    (click)="formValidToDatepicker.toggle()"
    class="form-control"
    formControlName="validTo"
    [class.is-invalid]="fineDigitForm.get('validTo').hasError('incorrect')"
    readonly
  />

answered Aug 13, 2021 at 15:43

Alexander

1,2831 gold badge17 silver badges24 bronze badges

Collectives™ on Stack Overflow

Highlighting field in Reactive forms that have server side errors in an Angular application

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related