Может ли Angular Material ErrorStateMatcher обнаружить, когда отправлена ​​родительская форма? - PullRequest
Новая
       26

Может ли Angular Material ErrorStateMatcher обнаружить, когда отправлена ​​родительская форма?

0 голосов
/ 13 июня 2019

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

<form [formGroup]="form" (submit)="submit()">
  <app-child [form]="form"></app-child>
  <button mat-button type="submit">Submit</button>
</form>

Дочерний компонент отображает поле ввода следующим образом: 

<mat-form-field *ngIf="form" [formGroup]="form">
  <input matInput
         placeholder="Email"
         formControlName="email"
         [errorStateMatcher]="matcher"
         required>
</mat-form-field>

Поле ввода является обязательным и должно отображать ошибку, если форма отправлена ​​без заполнения, даже если пользователь никогда ее не трогал. Это автоматическое поведение в простой форме, но (я думаю), поскольку я использую дочернюю форму, я должен реализовать пользовательскую логику ошибок с ErrorStateMatcher. 

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control, form) {
    return control && control.invalid && form && form.submitted;
  }
}

Однако это не работает. Я не могу понять, как получить дочерний ввод, чтобы определить, когда родительская форма была отправлена. ErrorStateMatcher обнаруживает, что что-то изменилось, но свойство submitted form всегда равно false. Что я делаю не так?

Смотрите этот Stackblitz

1 Ответ

1 голос
/ 14 июня 2019

вам не нужно реализовывать ErrorStateMatcher для достижения такого поведения. и не имеет смысла использовать formGroup на mat-form-field

Просто измените child.component.html следующим образом 

<mat-form-field *ngIf="form">
  <input matInput placeholder="Email" [formControl]="form.get('email')">
</mat-form-field>

вот рабочий пример https://stackblitz.com/edit/angular-material-error-matcher-child-component-6nwmwe

...