input type ="number"包含null而不是character

Question

我有一个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对象访问该字段的实际值(甚至document.querySelector('#foo').value评估为null虽然输入包含42bar)？

• 或者有没有办法检查输入字段是否包含字符？

• 或者除了使用之外别无他法input type="text"吗？

Answer 1

如果您输入的数字不是数字的"数字"输入,则值为null.这就是它的工作方式.

您可以检查该.validity.valid标志以查看该字段中是否包含有效值; 空值被认为对数字字段有效.