Angular Material - show a matte error when a button is pressed

I am trying to check with <mat-for-field>and <mat-error>. This works great when custom tabs exit input without filling. But how to make this error show when I click the button? I do not use submit. Also using template forms.

This is my code:

HTML:

<mat-form-field>
    <input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" required>
    <mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>

TS:

dueDateValidator: FormControl = new FormControl('', [Validators.required]);

+11
source share
7 answers

See how to use a form with a custom ErrorStateMatcher

(, , ), errorStateMatcher matInput. ErrorStateMatcher. ErrorStateMatcher isErrorState, FormControl matInput, , , . (true , , false , .)

, default.error-matcher.ts

/** Error when invalid control is dirty or touched*/
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.dirty || control.touched));
  }
}

TS :

matcher = new MyErrorStateMatcher();

matcher:

<mat-form-field>
    <input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" [errorStateMatcher]="matcher" required>
    <mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>
+18

, : Angular6:

1). import below:
    import { FormControl, FormBuilder, FormGroup } from '@angular/forms';

2). declare form control in .ts file:
    nameControl = new FormControl('');

3). put control in html:
    <mat-form-field  style="width: 100%" floatPlaceholder="never">
      <input matInput placeholder="your placeholder text" [formControl]="nameControl" 
        required/>
      <mat-error *ngIf="nameControl.errors?.required">name is required</mat-error>
    </mat-form-field>

3). on button click:
    this.nameControl.markAsTouched();

, , ".markAsTouched()" 3 .

+9

. :) :

this.nameControl.markAsTouched();
+3

, ( ):

TS StateMatcher , , .

if (this.myFormGroup.invalid) {
  this.matcher = new MyErrorStateMatcher();
  return;
}

MyErrorStateMatcher :

    return !!(control && control.invalid);

, Angular Material .

+2

You can also easily call the function AbstractControl.updateValueAndValidity()at the touch of a button. This will again start the verification process on the corresponding ForControl and show the errors, if any (based on your Validators).

So in your example:

    checkForErrorsOnButtonClick(): void {
      dueDateValidator.updateValueAndValidity();
    }
0
source

I was late for the party, but an easier way to call a check:

Object.keys(this.form.controls).forEach(field => { 
   const control = this.form.get(field);           
   control.markAsTouched({ onlySelf: true });      
});
0
source

Angular 8 introduced a new form method: markAllAsTouched();

This will mark the control / form and ALL DESCENDANTS as affected !!!

So:

this.form.markAllAsTouched();

This is the solution.

0
source

Source: https://habr.com/ru/post/1687486/


All Articles