Проверка сервера для мат-ввода

Question

Я сделал проверку сервера для моей angular -материальной формы.

И у меня есть две проблемы, во-первых, мне нужно установить <mat-error></mat-error>, где я показываю свое сообщение из ответа сервера, вне от <mat-form-fiel>

 <mat-form-field>
   <input formControlName="lastName"
    matInput
    placeholder="Last Name*"
    (focusout)="lastNameError = null"
    />
    <mat-error>This field is required</mat-error>  //--> this one is standard mat validation, and working on this place
  </mat-form-field>
  <mat-error class="mat-error-custom">{{ lastNameError }}</mat-error>  //--> this one is for showing my server message, and this one need to stay outside from mat-form-fiel to work

Есть ли способ установить это внутри?

И второй вопрос

Как установить класс ошибок для поля ввода, если я использую проверку на стороне сервера? Теперь у меня есть что-то вроде этого

Но я хочу установить класс, чтобы получить эти красные границы как набор материалов, если мы используем валидаторы материалов

Вот метод, в котором я получаю и устанавливаю все свои ответные сообщения сервера

    this.errorsMsgs$.pipe(takeUntil(this.destroy$)).subscribe((error: any) => {
      this.resetErrorMesg();
      if (error) {
        for (let err of error.errors) {
          if (err.field === "lastName") {
            this.lastNameError = err.defaultMessage;
            this.addNewUserForm.get("lastName").setErrors({ valid: false }); //--> I try add this but not working
          }
          if (err.field === "firstName") {
            this.firstNameError = err.defaultMessage;
          }
          if (err.field === "email") {
            this.emailError = err.defaultMessage;
          }
        }
      }
    });

Answer 1

После некоторого исследования я исправляю это таким образом ... Я oop через ошибки из ngrx@store и устанавливаю ошибки в formControl

this.errorsMsgs$ = this.store.select(fromStore.UserSelectors.getErrors);
    this.errorsMsgs$.pipe(takeUntil(this.destroy$)).subscribe((error: any) => {
      if (error) {
        for (let err of error.errors) {
          const formControl = this.addNewUserForm.get(err.field);
          if (formControl) {
            formControl.setErrors({
              serverError: err.defaultMessage
            });
          }
        }
      }
    });

И в HTML я проверяю для ошибки и отображать их рядом с полем ввода

<mat-form-field>
        <input
          formControlName="firstName"
          matInput
          placeholder="First Name*"
        />
        <mat-error *ngIf="addNewUserForm.get('firstName').errors?.minlength">
          Min length is 5 character
        </mat-error>
        <mat-error *ngIf="addNewUserForm.get('firstName').errors?.maxlength">
          Max length is 16 characters
        </mat-error>
        <mat-error *ngIf="addNewUserForm.get('firstName').errors?.serverError">
          {{ addNewUserForm.get("firstName").errors?.serverError }}  // --> here is from server response error
        </mat-error>
      </mat-form-field>

Кроме того, если вы отправляете форму через ngrx@effect, как я, то при отправке добавьте

this.yourForm.markAllAsTouched();

Без этого при отправке вашей форме и получить ответ об ошибке, вам нужно touch каждый вход, чтобы показать сообщение, при этом вы автоматически дотронетесь до всех полей.

Answer 2

Вы можете использовать asyncValidatorFunction, как в моем примере. Вы можете изменить метод http или anithing, который вы хотите. пример . В моем примере проверка входных данных называется каждый «размытие» (собственный ввод onblur), но вы можете изменить это на «изменить» или «отправить».