Angular material validation on submit

Question

I'm using Angular Material input fields and there is a problem that fields become red as soon as user does something to it.

However, I need these fields to stay "valid" until the form is submitted, so that the user starts seeing errors only after clicking submit button.

In casual inputs I've used that thing <input [class.ng-invalid]="control.invalid && submitted"> thus it starts turning red after clicking "Submit".

However that didn't help me when I tried to apply this to matInput

<mat-form-field class="w-100">
    <input [id]="id" matInput
           [class.ng-invalid]="control.errors && submitted"
           [placeholder]="getPlaceholder()"
           [formControl]="control">
</mat-form-field>

How do I achieve displaying errors only after submitting?

Sergey · Accepted Answer · 2018-12-03 12:17:59Z

3

Solved by creating own ErrorStateMatch as described in https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown

answered Dec 3, 2018 at 12:17

Sergey

7,69214 gold badges49 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular material validation on submit

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related