Components: [FormField] Error not showing for min/max validation errors

[ikramcheb]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

when the user enters invalid number , mat-error message should appear

What is the current behavior?

mat-error not showing

What are the steps to reproduce?

I tried with min and minlength but nothing is working

               <mat-form-field>
                  <input type="number" min="0" matInput name="totCarton" [(ngModel)]="container.totalCarton">
                  <mat-error>{{'error.min'|translate:param}}</mat-error>
                </mat-form-field>

or

            <mat-form-field class="full-width">
                  <input #totCarton="ngModel" matInput type="number" min="0" placeholder="{{'tot.carton'|translate}}" name="totCarton" [(ngModel)]="container.totalCarton">
                  <mat-error *ngIf="totCarton.hasError('min')">{{'error.min'|translate:param}}</mat-error>
                </mat-form-field>

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular 4.4.6
material 2.0.0-beta.12
typescript 2.3.4
all browsers

Is there anything else we should know?

[donroyco]

If I understand correctly what you want:
According to the MDN documentation on minlength:

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.

With min (MDN documentation) it will work, but it's only related to the _value_.

The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.

This StackBlitz example will get you in the right direction. You only need to add a custom validator that only allows digits to be entered.

For future questions:
Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[mmalerba]

Seems like an issue with angular forms. Here's an example demonstrating that it doesn't work even without Material: https://stackblitz.com/edit/angular-q2fhul-vyu9iz?file=app/form-field-error-example.ts

Maybe related to this: https://github.com/angular/angular/issues/17080

[mhmo91]

related to https://github.com/angular/angular/issues/16352

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}