Angular 2-8 way to display error without formbuilder by using material

Question

How to display validation error in my input, using Angular Material - Form Field, but without FormBuilder? I want to use it only with ngModel

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

My Examplе: That what I get and what I want to get with formBuilder

And It's what I got without

So my question - How to write logic from FormBuilder in my Html? Have we way to write something like this?

<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

You can use template driven forms if you don't want to use reactive form, then you get the validation you wish. Also, don't use value if you are using [(ngModel)], set the value to the model instead!

So if you go for a template driven form, remember to add also a name attribute, since that is how we register a form control under the hood. So try:

<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