angular 2 dart中是不是有材料输入类型号

Posted 2023-03-13

【中文标题】angular 2 dart中是不是有材料输入类型号

【英文标题】：Is there material input type number in angular 2 dartangular 2 dart中是否有材料输入类型号

【发布时间】：2017-04-25 21:32:05

【问题描述】：

我正在尝试使用 angular 2 dart 中的材料组件作为数字输入：

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

但它的行为就像一个正常的输入。在文档中它说它支持类型“数字”。我做错什么了吗？还是数字类型还没实现？

感谢您的任何建议。

【问题讨论】：

他们没有解决方案真是太糟糕了：-/ 到目前为止有什么工作吗？

【参考方案1】：

我可以分享我尝试输入数字（整数）的个人实验。它不能在所有浏览器上完美运行，但我希望在 android 和 ios 上显示正确的键盘。我所做的是以编程方式强制内部输入元素上的类型。似乎在 Firefox 上它不会阻止输入文本，但会显示一条消息（“请输入一个数字”）。它也不处理小数（即它确实需要一个整数）

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

    // http://***.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
  

我不知道这是否是最好的解决方案，但我发现很难有一个完整的跨浏览器解决方案

【参考方案2】：

我认为你需要设置一个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 在输入无效数字时使用当type="number".

【讨论】：

您的解决方案不起作用。我试图从库中复制适当的文件，编辑导入和关键行 - 然后出现错误消息并且无法编写信件作品。我没有实现的是小箭头键，如标准 html5 或 angularjs here （第二个块，“美元每小时费率）

抱歉，不知道。