27

There is the standard input as:

 <input type="number" placeholder="Hours">

Is there something in Angular Material Design?

enter image description here

I use Angular latest version

I tried this, but it is just simple input:

<md-input-container>
  <input mdInput type="number" placeholder="Favorite food" value="Sushi">
</md-input-container>

It should be < md-input-container input="number">? ot input type="number"> ?

Daniel
  • 1,695
  • 6
  • 23
  • 41
  • 1
    https://material.angular.io/components/input/overview - Supported input types: number – 0mpurdy Aug 03 '17 at 14:56
  • 1
    yes they have, just set the type='number'. Demo: https://plnkr.co/edit/1B06VtjfSpWXT7T98Lll?p=preview – FAISAL Aug 03 '17 at 15:00
  • are you trying to force users to only type numbers only or you want to use the type for error validation? – Nehal Aug 03 '17 at 15:09

4 Answers4

31

In short, yes. You want < md-input-container > wrapper which supports the following input types

  1. date
  2. datetime-local
  3. email
  4. month
  5. number
  6. password
  7. search
  8. tel
  9. text
  10. time
  11. url
  12. week

For example

<md-input-container>
    <input
        mdInput
        type="number"
        id="myNumber"
    />
</md-input-container>

Checkout https://material.angular.io/components/input/overview

prime
  • 2,004
  • 3
  • 28
  • 45
15

Use this for angular material number,

<mat-form-field>
  <input
    type="number"
    class="form-control"
    matInput
    name="value"
    placeholder="Slab"
    (change)="xxx()"
    formControlName="value">
</mat-form-field>
Falko
  • 17,076
  • 13
  • 60
  • 105
Abdus Salam Azad
  • 5,087
  • 46
  • 35
2

<md-input-container></md-input-container> is not working anymore

This works fine.

<mat-label>Time</mat-label>
    <input type="number" class="form-control" matInput name="time" placeholder="Time" change="xxx($event)" formControlName="time" required>

In .TS file, you can have the change event with xxx (e) { console.log(e); }

rofrol
  • 14,438
  • 7
  • 79
  • 77
Viraj Sandaruwan
  • 51
  • 5
0

Add this to your css:

:host ::ng-deep .mdc-text-field__input::-webkit-inner-spin-button {
   /* https://stackoverflow.com/questions/75066261/angular-material-15-does-not-have-time-or-datetime-picker-icon-for-selection-of/75067056#75067056 */
  -webkit-appearance: auto;
  appearance: auto;
  /* https://stackoverflow.com/questions/25194631/is-it-possible-to-always-show-up-down-arrows-for-input-number/59555901#59555901 */
  opacity: 1;
}

To moderator: I have deleted my other duplicated answer.

rofrol
  • 14,438
  • 7
  • 79
  • 77