角度2镖是否有材料输入类型编号

时间:2016-12-10 14:44:54

标签: dart material-design angular-dart angular-components

我想在角度2飞镖中使用材质成分作为数字输入:

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

但它的行为类似于普通输入。在文档中,它支持类型&#34;数字&#34;。我做错了吗?或者还没有实现数字类型?

感谢您提出任何建议。

2 个答案:

答案 0 :(得分:3)

我可以分享我的个人实验,尝试输入数字(整数)。它并不适用于所有浏览器,但我想在Android和iOS上显示正确的键盘。我所做的是以编程方式强制内部输入元素上的类型。似乎在Firefox上它不会阻止输入文本但会显示消息(&#34;请输入一个数字&#34;)。它也不处理小数(即它确实期望一个整数)

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
  }

我不知道这是否是最佳解决方案,但我发现很难拥有完整的跨浏览器解决方案

答案 1 :(得分:0)

我认为您需要设置errorMsg

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

此行https://github.com/dart-lang/angular2_components/blob/a0eff879a6cb347b8beb95ed758c02c6dd9dfaa0/lib/src/components/material_input/material_input.dart#L232似乎表示内部输入元素的type="tel"type="number"设置为text,而此行https://github.com/dart-lang/angular2_components/blob/a0eff879a6cb347b8beb95ed758c02c6dd9dfaa0/lib/src/components/material_input/material_input.dart#L61表示{在errorMsg时输入无效号码时使用{1}}。