* ngIf = "name.invalid" не работает с угловым материалом - PullRequest
Новая
       8

* ngIf = "name.invalid" не работает с угловым материалом

0 голосов
/ 26 февраля 2019

Когда я положил это: 

<textarea #name="ngModel" class="form-control" id="" cols="30" rows="3" style="resize:none" required></textarea>
<div *ngIf="name.invalid" class="alert alert-danger">
     <div *ngIf="name.errors.required">
            Name is required.
      </div>
</div>

Я получил это, когда представление начинается: (Это нормально, я хочу что-то подобное, но в Angular Material ...) enter image description here

И, когда я положил это (угловой материал): 

<mat-form-field>
  <textarea matInput #name="ngModel" class="form-control" id="" cols="30" rows="3" style="resize:none" required></textarea>
  <mat-error *ngIf="name.invalid">Name is required.</mat-error>
</mat-form-field>

Я получил это:

Это явно недействительно, но ничего не происходит, нет красного.<mat-error> появляется, когда я вручную фокусируюсь и размываю текстовое поле.Я хочу, чтобы эта текстовая область в начале показала неверное значение: enter image description here

Что я могу сделать?Заранее спасибо.

1 Ответ

0 голосов
/ 26 февраля 2019

Элемент mat-error становится видимым только после неудачной проверки элемента управления поля формы.

Для углового материала используется значение по умолчанию ErrorStateMatcher , чтобы проверить, действителен ли этот элемент управления: 

@Injectable({providedIn: 'root'})
export class ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.touched || (form && form.submitted)));
  }
}

Как вы можете видеть, он потерпит неудачу только при касании элемента управления или при отправке формы.

Вы можете изменить это поведение, используя errorStateMatcher вход для вашего элемента управления:

html 

<textarea matInput ... [errorStateMatcher]="matcher" required></textarea>

ts 

import {ErrorStateMatcher} from '@angular/material/core';

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

@Component({
  ...
})
export class AppComponent  {

  matcher = new MyErrorStateMatcher()
}

Ng-run Пример

...