web-dev-qa-db-ja.com

Material2 <mat-error>をトリガーして入力変更時に表示する方法

https://material.angular.io/components/form-field/overview の例を考えます。

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>


import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

/** @title Form field with error messages */
@Component({
  selector: 'form-field-error-example',
  templateUrl: 'form-field-error-example.html',
  styleUrls: ['form-field-error-example.css']
})
export class FormFieldErrorExample {
  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }
}

エラーはぼかしでトリガーされたようです。入力を終了した後にのみ、エラーが表示されます。私のアプリケーションでも同じです。この現在のモードでは、エラーが存在しますが、入力がフォーカスを失うまでは表示されません。

入力が変更されたときにエラーが表示されるようにするにはどうすればよいですか。

angular-material2angular5
4
st_clair_clarke

docsに従って、errorStateMatcherを使用する必要があります。

あなたにとってそれはこのように見えるでしょう：

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

そしてあなたのコンポーネントで行います：

matcher = new MyErrorStateMatcher();

次に、入力フィールドに追加するだけです

[errorStateMatcher]="matcher"

StackBlitz

7
AJT82

およびコンポーネントクラス：

matcher = {
  isErrorState: () => {
    return this.statusField; // return Boolean status value
  }
};

次に、matInputフィールドに追加するだけです

[errorStateMatcher]="matcher"
1
Aupr