Angular 7 - How to read service side validations from Object using Template Driven?

问题

I am using Angular 7 Template Driven Form validations. I already went thru link: https://jasonwatmore.com/post/2019/06/15/angular-8-template-driven-forms-validation-example, but I did not find any working solution to read Service Side Validation/Error message.

Details I took from error in ts file: fieldErrors is having errors for all fields which failed to validate service side validations.

handleError(error: any) {
    if (error instanceof HttpErrorResponse) {
      if (error.error.fieldErrors) {
        this.fieldErrors = error.error.fieldErrors;
        console.log('FIELD_ERRORS', this.fieldErrors);
      }
    }
  }

On UI console, I'm getting below error messages on form from Service Side (i.e Spring Boot Services)

0:
code: "Size"
field: "studentName"
message: "Length of characters should be between 1 to 255"
resource: "studentDto"
__proto__: Object
1:
code: "NotBlank"
field: "studentName"
message: "Program Name is mandatory"
resource: "studentDto"
__proto__: Object
2:
code: "NotBlank"
field: "studentDesc"
message: "Student Description is mandatory"
resource: "studentDto"
__proto__: Object
length: 3

Now on HTML form on each respective field I want to read these "messages" and shoe the details, how can I do that ?

<div class="awr-input">
    <label class="awr-inputbox-label">
        Student Name
        <span class="awr-required"><span aria-hidden="true">*</span></span>
    </label>
    <div class="input-container">
        <input type="text" id="" class="input-box" aria-required="true" minlength="0" maxlength="255"
            autocomplete="off" width="0" min="3" max="100" step="" [(ngModel)]="program.programName"
            name="studentName" required #studentName="ngModel">
    </div>
    <div *ngIf="studentName.invalid && (studentName.dirty || studentName.touched)" class="awr-error awr-required">
        <div *ngIf="studentName.errors.required">Student Name is mandatory</div>
    </div>
    <div *ngIf="????? - What to write here from Server side validations??" class="awr-error awr-required">
        {{fieldErrors}}
    </div>
</div>

回答1:

Here is the stackblitz : https://stackblitz.com/edit/angular-ezkumh?file=src/app/app.component.html

For the code :

input = 'test';
@ViewChild('inputRef', { static: true }) inputRef: NgModel;

setErrors() {
  this.inputRef.control.setErrors({ some: 'error' });
}

Simply get a view child ref of your control / form, then set its errors

回答2:

if (err instanceof HttpErrorResponse) {
                  const validationErrors = err.error.message;
                  if (err.status === 401) {
                    Object.keys(validationErrors).forEach(prop => {
                      const formControl = this.addFormGroup.get(prop);
                      if (formControl) {
                        formControl.setErrors({
                          serverError: validationErrors[prop],
                         });
                      }
                    });
                  }
                }

As shown above you need to setError for each formControl of your FormGroup

来源：https://stackoverflow.com/questions/58092282/angular-7-how-to-read-service-side-validations-from-object-using-template-driv

标签

angular

angularjs-directive

angular7