处理多个垫错误

Question

我有这样的垫输入错误处理

      <mat-form-field>
        <input formControlName="title" matInput placeholder="Title*" />
        <mat-error *ngIf="addNewForm.get('title').errors?.required">
          Can not be empty
        </mat-error>
        <mat-error *ngIf="addNewForm.get('title').errors?.minlength">
          Min length is 1 character
        </mat-error>
        <mat-error *ngIf="addNewForm.get('title').errors?.maxlength">
          Max length is 255 characters
        </mat-error>
      </mat-form-field>

      <mat-form-field>
        <input formControlName="name" matInput placeholder="Name*" />
        <mat-error *ngIf="addNewForm.get('name').errors?.required">
          Can not be empty
        </mat-error>
        <mat-error *ngIf="addNewForm.get('name').errors?.minlength">
          Min length is 1 character
        </mat-error>
        <mat-error *ngIf="addNewForm.get('name').errors?.maxlength">
          Max length is 255 characters
        </mat-error>
      </mat-form-field>

如何直接在组件中处理这个问题，而不是手动编写所有这些错误，检查所有组件并动态设置错误，像这样

      <mat-form-field>
        <input formControlName="title" matInput placeholder="Title*" />
        <mat-error>{{ someError }}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <input formControlName="name" matInput placeholder="Name*" />
        <mat-error>{{ someError }}</mat-error>
      </mat-form-field>

这里是组件

this.addNewUserForm = this.formBuilder.group({
      title: [
        "",
        [
          Validators.required,
          Validators.minLength(1),
          Validators.maxLength(255),
          noWhitespaceValidator
        ]
      ],
      name: [
        "",
        [
          Validators.required,
          Validators.minLength(4),
          Validators.maxLength(255),
          noWhitespaceValidator
        ]
      ]
    });

Answer 1

您可以编写一个 getter 函数，其中 returns 只是错误消息。像这样：

get errorMessage(): string {
   const form: FormControl = (this.addNewUserForm.get('title') as FormControl);
   return form.hasError('required') ?
     'Required error message' :
     form.hasError('maxlength') ?
     'Max length error' : 
     form.hasError('minlength') ?
     'Min length error' :
     form.hasError('nowhitespaceerror') ?
     'No white space error' : '';
}

在此之后，您只需像模板中的变量一样使用此方法：

<mat-error>{{ errorMessage }}</mat-error>

或基于此示例的简单解决方案：here。

export class InputErrorExample {
  constructor(private formBuilder: FormBuilder) {}

  errorMessages = {
    maxlength: 'max',
    minlength: 'min',
    email: 'email'
  };

  addNewUserForm = this.formBuilder.group({
      title: [
        "",
        [
          Validators.required,
          Validators.minLength(1),
          Validators.maxLength(255),
          Validators.email
          // noWhitespaceValidator
        ]
      ]
    });

  errors(ctrl: FormControl): string[] {
    return ctrl.errors ? Object.keys(ctrl.errors) : [];
  }
}

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Email" [formControl]="addNewUserForm.get('title')"
           [errorStateMatcher]="matcher">
    <mat-hint>Errors appear instantly!</mat-hint>
    <mat-error>
      <ng-container *ngFor="let error of errors(addNewUserForm.get('title'))">
        {{ errorMessages[error] }} <br>
      </ng-container>
    </mat-error>
  </mat-form-field>
</form>

Answer 2

这是一种方法：

聆听您的 FormControl 实例的 statusChanges observable，当它发出时，得到它的第一个错误。

const titleCtrl = this.addNewUserForm.get('title');

const titleErr$ = titleCtrl.statusChanges
  .pipe(
   filter(status => status === 'INVALID'),
   map(() => {
    if (!titleCtrl.errors) {
      return null; 
    }   

    // Returning the first error
    for (const errName in titleCtrl.errors) {
       return titleCtrl.errors[errName];
     }
   }),
   filter(err => !!err)
  )

现在，这取决于您的用例。

如果您只需要在模板中使用一次错误，您可以使用异步管道。

<mat-form-field>
    <input formControlName="title" matInput placeholder="Title*" />
    <mat-error>{{ titleErr$ | async }}</mat-error>
</mat-form-field>

如果需要在多个地方使用错误或者需要对多个FormControl执行相同的逻辑，可以在组件中订阅（命令式[=31 =] 方式）或者您可以找到一种方式来合并所有错误并在视图中保留订阅（ 反应式 方式）。

请记住，如果您订阅组件 class，则必须取消订阅。

处理多个垫错误

handling with multiple mat-errors

formbuilder

angular

angular-reactive-forms