1

I was tring to use material component in angular 2 dart as a number input:

<material-input type="number"></material-input>

but it behaves like a normal input. In docs it sais it supports type "number". Am i doing anything wrong? Or isn't number type implemented yet?

Thank you for any suggestions.

Lubomír Grund
  • 145
  • 1
  • 13

2 Answers2

3

I can share my personal experiment trying to have a number (integer) input. It does not work perfectly on all browsers but I wanted to have the proper keyboard shown on Android and iOS. What I did was forcing the type on the inner input element programmatically. It seems that on Firefox it does not prevent entering text but does display a message ("Please enter a number"). It does not handle decimal neither (i.e. it does expect an integer) 

initInputNumber(MaterialInputComponent inputComponent) {
    inputComponent.type = "number";
    InputElement inputElement = inputComponent.inputEl.nativeElement;
    inputElement.type = "number";

    // http://stackoverflow.com/questions/6178556/phone-numeric-keyboard-for-text-input
    // As of mid-2015, I believe this is the best solution:
    //  <input type="number" pattern="[0-9]*" inputmode="numeric">
    inputElement.attributes["inputmode"] = "numeric";
    inputElement.pattern = "[0-9]*"; // this and only this works 0-9
  }

I don't know if that's the best solution but I find it hard to have a complete cross-browser solution

alextk
  • 5,713
  • 21
  • 34
0

I think you need to set an errorMsg

<material-input type="number" errorMsg="That's not a number"></material-input>

This line https://github.com/dart-lang/angular2_components/blob/a0eff879a6cb347b8beb95ed758c02c6dd9dfaa0/lib/src/components/material_input/material_input.dart#L232 seems to indicate that type="tel" and type="number" are set to text for the internal input element, while this line https://github.com/dart-lang/angular2_components/blob/a0eff879a6cb347b8beb95ed758c02c6dd9dfaa0/lib/src/components/material_input/material_input.dart#L61 says that errorMsg is used when and invalid number is entered when type="number".

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Your solutions does not work. I tried to copy the appropriate files from the library, edited imports and critical lines - then error messages and not being eble to write letter works. What i have not achieved are the little arrow keys, like in standart html5 or like in angularjs [here](https://material.angularjs.org/latest/demo/input) (second block, "hourly rate in USD) – Lubomír Grund Dec 11 '16 at 14:13
  • Sorry, no idea. – Günter Zöchbauer Dec 11 '16 at 14:13