Угловой 7 - Как читать проверки на стороне службы из объекта, используя управляемый шаблоном? - PullRequest
Новая
       47

Угловой 7 - Как читать проверки на стороне службы из объекта, используя управляемый шаблоном?

0 голосов
/ 25 сентября 2019

Я использую Angular 7 Template Driven Form validations.Я уже перешел по ссылке: https://jasonwatmore.com/post/2019/06/15/angular-8-template-driven-forms-validation-example,, но я не нашел никакого рабочего решения для чтения Проверка на стороне службы / сообщение об ошибке .

Подробности, которые я извлек из ошибки в файле ts: у fieldErrors есть ошибки для всех полей, которые не смогли проверить валидации на стороне службы. 

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

В консоли пользовательского интерфейса я получаю ниже сообщения об ошибкахв форме со стороны службы (т.е. 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

Теперь в форме HTML в каждом соответствующем поле я хочу прочитать эти «сообщения» и указать детали, как я могу это сделать? 

<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>

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019 
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],
                         });
                      }
                    });
                  }
                }

Как показано выше, вам нужно установить error для каждого formControl вашей FormGroup

0 голосов
/ 25 сентября 2019

Вот стекаблиц: https://stackblitz.com/edit/angular-ezkumh?file=src/app/app.component.html

Для кода: 

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

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

Просто получите дочерний элемент ref вашей формы / элемента управления, а затем установите его ошибки

...