mat-input的服务器验证

Question

我为我的棱角材料表格进行了服务器验证。

而且我有两个问题，首先是，我需要将<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

您可以在我的示例中使用asyncValidatorFunction。您可以更改http方法或所需的任何方法。 example。在我的示例中，输入验证称为每个“模糊”（本机输入onblur），但您可以将其更改为“更改”或“提交”。

Answer 2

经过一番研究，我以这种方式解决了这个问题...我遍历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每个输入以显示msg，这样您可以自动触摸所有字段。