web-dev-qa-db-ja.com

Angular Material-ボタンのクリック時にマットエラーを表示

<mat-for-field>および<mat-error>を使用して検証を試みています。これは、ユーザーが入力せずに入力からタブで移動するときに正常に機能します。しかし、ボタンをクリックしたときにこのエラーを強制的に表示するにはどうすればよいですか？私は送信を使用していません。また、テンプレート駆動型フォームを使用します。

これは私のコードです：

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]);

angulartypescriptangular-material
14
ganeshk

カスタムでフォームを使用する方法を参照してください ErrorStateMatcher

この動作をオーバーライドする場合（たとえば、無効なコントロールがダーティになるとすぐにエラーを表示するか、親フォームグループが無効である場合）、matInputのerrorStateMatcherプロパティを使用できます。このプロパティは、ErrorStateMatcherオブジェクトのインスタンスを取ります。 ErrorStateMatcherは、このmatInputおよび親フォームのFormControlを受け取り、エラーを表示するかどうかを示すブール値を返す単一のメソッドisErrorStateを実装する必要があります。 （表示する必要があることを示す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();

次に、マッチャーを使用するように入力を変更します。

<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>
21
Kyle Pfromer

ボタンのクリックでマットエラーを表示するには、以下を試してください。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's click:
    this.nameControl.markAsTouched();

フォームコントロールの使用方法を確認することが重要です。ポイント3の「.markAsTouched（）」には、対応するフォームコントロールのマットエラーが表示されます。

14
Simran kaur

これは私のために動作します。 :)ボタンのクリック時：

this.nameControl.markAsTouched();
4
Tejashree

Kyle Pfromerの投稿に基づいて、私は解決策を見つけました（同じ問題に対する）：

TSファイルで、無効なフォームを見つけた後、StateMatcherを追加しました。

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

MyErrorStateMatcherクラスで、次のように変更しました。

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

Angularマテリアルがとにかくエラーを検出していないのは紛らわしいと思います。

2
snibbo

Angular 8には新しいフォームメソッドがあります：markAllAsTouched();

これにより、コントロール/フォームおよびすべての子孫にタッチ済みとしてマークされます!!!

そう：

this.form.markAllAsTouched();

解決策です。

1
Spock

ボタンのクリック時にAbstractControl.updateValueAndValidity()関数を簡単に呼び出すこともできます。これにより、対応するForControlで検証プロセスが再度実行され、エラーがある場合は（バリデーターに基づいて）エラーが表示されます。

したがって、あなたの例では：

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