Отображать сообщение об ошибке mat-form-field до касания элемента управления - PullRequest
Новая
       89

Отображать сообщение об ошибке mat-form-field до касания элемента управления

0 голосов
/ 11 июля 2020

У этого вопроса есть Stackblitz; stackblitz.com / edit / yz1dhz .

Как mat-form-field сообщения об ошибках проверки могут отображаться при загрузке компонента и до того, как пользователь коснулся элемента управления ? 

class AppComponent implements OnInit {
  form: FormGroup;

  constructor(private readonly fb: FormBuilder) {
    // Create a form in an invalid state.
    this.form = this.fb.group({
      a: this.fb.control(null, [Validators.required])
    });
  }

  ngOnInit() {
    // This does do what I had hoped.
    this.form.updateValueAndValidity();
  }
}

Этот код создает форму, которая сразу становится недействительной. Я ожидал, что <mat-error> покажет: 

<form [formGroup]="form">
    <mat-form-field>
        <mat-select formControlName="a">
            <mat-option>Foo</mat-option>
            <mat-option>Bar</mat-option>
            <mat-option>Baz</mat-option>
        </mat-select>
    <mat-hint>I am a hint.</mat-hint>
    <mat-error>{{ form.controls['a'].errors | json }}</mat-error>
    </mat-form-field>
</form>

Но вместо этого отображается <mat-hint>.

введите описание изображения здесь

1 Ответ

0 голосов
/ 11 июля 2020

i thins, вы можете заставить его таким образом 

this.form.get('a').markAsTouched();

или вы можете пометить все элементы управления как затронутые 

this.form.markAllAsTouched();

вы можете изменить статус элемента управления формой, используя markAsTouched, markAllAsTouched, markAsUntouched, markAsDirty, markAsPristine, markAsPending ...

...