我想在角度2飞镖中使用材质成分作为数字输入:
<material-input type="number"></material-input>
但它的行为类似于普通输入。在文档中,它支持类型&#34;数字&#34;。我做错了吗?或者还没有实现数字类型?
感谢您提出任何建议。
答案 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}}。