Question

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

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

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

感谢您提出任何建议。

Answer 1

我可以分享我的个人实验，尝试输入数字（整数）。它并不适用于所有浏览器，但我想在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
  }

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

Answer 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时输入无效号码时使用{1}}。

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

2 个答案: