Угловой 2-8 способ отображения ошибки без формубилдера с использованием материала

Question

Как отобразить ошибку проверки в моем вводе, используя Angular Material - Form Field, но без FormBuilder? Я хочу использовать его только с ngModel

https://material.angular.io/components/form-field/overview

Мой пример: что я получу и что я хочу получить с formBuilder

И это то, что я получил без

Итак, мой вопрос - Как написать логику из FormBuilder в моем Html? У нас есть способ написать что-то вроде этого?

<mat-form-field appearance="outline" *ngClass="if !reqDateFrom: ErrorInput">
    <mat-label>From Date</mat-label>
    <input matNativeControl [(ngModel)]="reqDateFrom" value="{{fromDate}}">
</mat-form-field>

Answer 1

Вы можете использовать формы на основе шаблонов, если вы не хотите использовать реактивную форму, тогда вы получите подтверждение, которое вы хотите. Кроме того, не используйте value, если вы используете [(ngModel)], вместо этого установите значение для модели!

Так что, если вы выбираете форму, управляемую шаблоном, не забудьте добавить также атрибут name, поскольку именно так мы регистрируем элемент управления формы под капотом. Поэтому попробуйте:

<form #f="ngForm">
  <mat-form-field appearance="outline">
    <mat-label>From Date</mat-label>
      <input matNativeControl name="reqDateFrom" [(ngModel)]="reqDateFrom" required>
    <mat-error>Required</mat-error>
  </mat-form-field>
</form>

STACKBLITZ

Answer 2

FormBuilder - formgroup дает готовую проверку с угловым материалом. Если вы используете ngModel, вы должны использовать ngClass, чтобы изменить цвет на красный для ошибки. Пожалуйста, проверьте, установлен ли viewEncapsulation на none или вы используете ng :: deep в css o, чтобы отразить ошибку в ngModel Validation