当matInput失去焦点时，如何避免mat-form-field验证触发? [英] How to avoid mat-form-field Validation trigger when matInput lose focus?

问题描述

在createGroup.component.ts中有以下FormGroup

I have the following FormGroup in createGroup.component.ts

    this.formGroup = new FormGroup({
  groupName: new FormControl({ value: this.data.groupName, disabled: this.isEditPopup }, [
    Validators.required
  ]),
  groupDescription: new FormControl(this.data.groupDescription, [
  ]),
  groupId: new FormControl(this.data.groupId, [
  ])
});

我在下面的html角中使用了createGroup.component.html中的材料指令.

I have the below angular html that uses material directives in createGroup.component.html

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
        <mat-form-field>
            <input matInput formControlName="groupName" placeholder="Group name*">
        </mat-form-field>`enter code here`
        <div *ngIf="(formGroup.controls['groupName'].touched)">
            <mat-error *ngIf="formGroup.controls['groupName'].hasError('required') ">
                Group Name is required
            </mat-error>
    </div>

    <div mat-dialog-actions>
        <button mat-button [ngClass]="['btn','btn-success','active']" type="submit">Ok</button>
        <button mat-button (click)="cancelDialog($event)" type="button">Cancel</button>
    </div>
</form>

问题是，当光标移出焦点时，会触发formGroup验证. 在此处输入图片描述

The problem is, when cursor out focus the input, the formGroup validation gets triggered. enter image description here

仅当用户按下提交"或输入内容肮脏时才需要在mat-form-field上触发验证错误，而不是在输入内容模糊不清时才触发.

I need to trigger validation errors on mat-form-field only if the user pressed submit or the input is dirty, not when input is blur and touched.

推荐答案

我最近回答了类似的问题

I recently answered the similar question here. Please have a look at that. Its a little work around but very helpful.

要实现所需的功能，必须使用输入元素上的errorStateMatcher输入属性覆盖mat-error的默认行为.

To achieve what you want, you have to override the default behavior of mat-error using errorStateMatcher input property on input element.

因此在您的代码中实现以下ErrorStateMatcher

So implement the following ErrorStateMatcher in your code

您可以按以下方式修改isErrorState()

And you could modify isErrorState() as follows

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return (control && (control.dirty && control.invalid));  // show error only when dirty and invalid
  }
}

并将mat-error和input标记放在相同的mat-form-field

And place your mat-error and input tag inside the same mat-form-field

<mat-form-field>
     <input matInput [errorStateMatcher]="matcher" formControlName="groupName" placeholder="Group name*">
     <mat-error *ngIf="formGroup.controls['groupName'].hasError('required')">
                Group Name is required
     </mat-error>
</mat-form-field>

这篇关于当matInput失去焦点时，如何避免mat-form-field验证触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！