MrWolfZ/ngrx-forms

Invalid number input not handled properly

n9iels opened this issue · 1 comments

Describe the bug
Given a none-required input of the type="number". When the input does contain anything else than a number, say for example 123-4 the input will loose it's value. This is by browser design and spec, see for example this Stack Overflow Post. However I would expect that the control state would become invalid too. This is possible to check given this raw JS code example:

<input id="numberInput" type="number" value="123-4">
<script>
console.log(document.getElementById("numberInput")..validity.valid); // false
</script>

To Reproduce
https://d1p0w.csb.app/

  1. Open the Sandbox and type 123-4 in the input field
  2. Observe that the value will become null but the control is still considered valid

https://d1p0w.csb.app/

Expected behavior
The control should be come invalid since the number field is concidered invalid by the browser, also the validation greaterThan(0) indicates that the control should become invalid in this case.

Library version:
Version used in the sandbox (^10.0.0)

As the documentation of greaterThan specifies, null, undefined etc. are considered valid to allow for optional controls. To make the field invalid in your case, just add required to the list of validations, e.g. validate(required, greaterThan(0))