Angular Material validation without reactive forms

6
votes

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.

2
angularangular-material2
Did you ever figure this out? I'm up against a similar issue. - Lenny
If we're talking about client side validation, there's a set of built-in validators. You're free to write the custom one via @Directive. Then it's possible to access the errors via template variables such as name.perstine for #name etc. <mat-errors> should work as well doc - WildDev
@WildDev People who do not use reactive forms tend to be the people who have a different validation solution (e.g. my validation happens through json schemas, as we need to use it in a lot of different places) and getting that to work with "the angular form" way gives rise to a lot of bloat. - David Mulder

2 Answers

5
votes

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.

2
votes

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;
}