CODEWITHSUNDEEP
angularangular-material2
hoonzis
hoonzis

Reputation: 1737

Angular Material validation without reactive forms

I am struggling to get the Angular Material forms validation work with Angular Template forms. All examples are working with reactive forms only.

I am generating template Angular Material template forms in the following form:

<mat-form-field *ngSwitchCase="'text'" class="entity-form-field" appearance="outline">
  <input matInput [placeholder]="field.title" [value]="getValue(field)" 
    (change)="setValue(field, $event)" [required]="field.req" [id]="field.id">
  <mat-error *ngIf="fieldInvalid(field)">{{getErrorMessage(field)}}</mat-error>
</mat-form-field>

Both fieldInvalid and getErrorMessage are working fine, so the field error message should be visible. If I change it to a different tag then it will be visible:

<p *ngIf="fieldInvalid(field)">{{getErrorMessage(field)}}</p>

I understand that the Reative Forms have to change the state of the input to make change it's style to make it visible.

Is there a way to do the same with simple Template Forms? I could probably also apply the Angular Material error styles, but I can't find the documentation.

Upvotes: 9

Views: 13497

Answers (2)

IlyaP
IlyaP

Reputation: 397

Solved this after reading Angular doc (https://angular.io/guide/forms):

<mat-form-field>
<input matInput [(ngModel)]="scenario.name" name="scenarioName" 
#scenarioName="ngModel"
placeholder="Scenario name" class="form-control"
required minlength="3">
<mat-error [hidden]="scenarioName.valid">Scenario name should have at least 3 symbols</mat-error>
</mat-form-field>

So the key was #scenarioName="ngModel" bit which then Angular uses to assign valid/invalid properties that you can then use for mat-error visisbility.

Upvotes: 6

hoonzis
hoonzis

Reputation: 1737

This is not a pure solution, but simple and feasable workaround. Mat-hint can easily be styled as error and conditionally shown only in error state:

<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput ...>
  <mat-hint class="error-hint" *ngIf="fieldInvalid(field)">{{getErrorMessage(field)}}</mat-hint>
</mat-form-field>

And the error-hint class:

.error-hint {
  color: red;
}

Upvotes: 2

Related Questions