How to Validate & Display Error Message - Angular2 Material Design?

Question

I have this input:

<form #f="ngForm" name="productForm">
     <md-input [(ngModel)]="product.price" name="price" required="true" placeholder="Price (USD)"></md-input>
     <div ng-messages="productForm.price.$error" role="alert">
         <div ng-message-exp="['required']">
              Price is required
          </div>
     </div>
</form>

But the message Price is required doesn't show up.

How should I properly format the error message?

The ng-invalid class appears when the price input is empty:

When I fill in something:

Angular injects ng-valid class in it.

I want is to have the style similar to angular1 md design that looks like this:

score 9 · Accepted Answer · edited May 16 '17 at 18:30

9

Hopefully this will be added as angular2-material evolves, but currently the way to mimic this is to set the dividerColor and use the MD-HINT directive. example:

<md-input placeholder="Email address"
    #email="ngModel"
    name="email"
    type="text"
    fullWidth={true}
    [(ngModel)]="model.email"
    required
    email
    dividerColor="{{ !email.valid ? 'warn' : 'primary' }}">
    <md-hint [hidden]="email.pristine || email.valid">
        <span [hidden]="email.errors?.required || !email.errors?.email">
            This doesn't appear to be a valid email address.
        </span>
        <span [hidden]="!email.errors?.required">Email address is required.</span>
    </md-hint>
</md-input>

edited May 16 '17 at 18:30

gunr2171

16,104
25
61
88

answered Aug 28 '16 at 22:32

user1558224

106
2

excuse me, what do you mean by, !email.errors?.email? – Vicheanak Aug 29 '16 at 16:47
discussion about one this one is on official material2 repo https://github.com/angular/material2/issues/348 – angularrocks.com Jan 18 '17 at 05:58
2

you might want to edit the answer for the latest version. dividerColor now needs to be part of md-input-container instead of md-input – cport1 Mar 10 '17 at 20:51

score 5 · Answer 2 · answered Oct 15 '17 at 06:28

5

Validation messages can now be inserted with Angular Material version 2.0.0 onward. Check the documentation here.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Email" [formControl]="emailFormControl">
    <mat-error *ngIf="emailFormControl.hasError('pattern')">
      Please enter a valid email address
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      Email is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</form>

answered Oct 15 '17 at 06:28

Dilshan Liyanage

4,440
2
31
33

Is it possible to make the error show while typing and not when bluring the input field. I know that if I blur it and then type it will validate as I type, but is it possible to get it to show me the error message while typing the first time I enter the input field ? – Viktor Eriksson Jan 23 '18 at 14:00
Yes @ViktorEriksson. It is. I'll leave it as a solution. – Reza Taba Jan 02 '21 at 15:19

Reza Taba · Answer 3 · 2021-01-02T15:28:43.207

0

Make the mat-error show while typing globally:

1- Import libraries:

import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';

2- Add to providers like:

@NgModule({
  providers: [
    AuthService,
    UserService,
    { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
  ],
})

3- Re-Serve the app.

edited Jan 02 '21 at 15:28

answered Jan 02 '21 at 15:20

Reza Taba

1,151
11
15

How to Validate & Display Error Message - Angular2 Material Design?

3 Answers3

Linked