input type="number" 包含 null 而不是字符答案

【问题标题】：input type="number" contains null rather than characterinput type="number" 包含 null 而不是字符
【发布时间】：2017-06-04 23:48:30
【问题描述】：

我有一个 number 输入字段，我想用 Angular2 进行验证：

<input type="number" class="form-control" name="foo" id="foo"
       [min]="0" [max]="42" [(ngModel)]="foo" formControlName="foo">

到目前为止，这在 Chrome 中运行良好，因为 Chrome 忽略字符作为输入（不将它们插入到输入中 -> 输入为空 -> 需要验证触发器，或者已经有一个数字，所以最小/最大验证触发器)。

另一方面，Firefox 允许用户在输入中输入字符，这就是问题所在，如果我插入字符，则所需的验证触发并且表单控件的值评估为 null，这会导致：

我想区分空值和无效模式，但我发现实现这一点的唯一方法是制作input type="text" 并使用模式验证器，因为输入的值是null（如果它包含字符) 并且模式验证器不会在 input type="number" 上触发。

有没有办法使用 Angular2 FormGroup 对象访问字段的实际值（即使输入包含 42bar，即使 document.querySelector('#foo').value 评估为 null）？
李>
或者有没有办法检查输入字段是否包含字符？
或者除了使用input type="text"之外别无他法？

【问题讨论】：

【解决方案1】：

如果您在“数字”输入中键入不是数字的内容，则该值将为null。这就是它应该工作的方式。

您可以检查.validity.valid 标志以查看该字段是否具有有效值；空值被认为对数字字段有效。

【讨论】：

如果我为我的 foo 输入字段检查 FormGroup 它只有一个 valid 属性，如果输入为空，它也评估为 false - 由于所需的验证器（如果我不'不使用所需的验证器我将如何检查输入是否不为空且不包含字符？）
我不明白；为什么不检查<input> 元素本身呢？也就是说，在我看来，HTML5 表单验证不是很有用，或者“灵活”是一个更好的词。就我个人而言，当我知道我在触摸屏设备上进行渲染时，我只会将“数字”元素放到页面上。
问题是我有一个FormGroup 所以我无法直接访问<input> 元素，如果我想选择元素我必须做类似document.querySelector('#foo') 但那意味着我必须将我的 FormGroup 元素的名称映射到 DOM 中的 id，这很尴尬并且违背了分离模型和模板的目的......
你也可以选择“input[type=number]”或类似的东西。