类型=数字的Angular Reactive Form控件将在模糊时重新渲染

时间:2019-02-01 04:25:31

标签: angular reactive-forms

我有一个Angular(v7)反应形式(对于仅模板形式可能是相同的)。 具有articleRef = FirebaseDatabase.getInstance().getReference().child("Artigos").child(articleKey); articleTagRef = articleRef.child("temas"); articleTagRef.addValueEventListener(new ValueEventListener() { @Override public void onDataChange(@NonNull DataSnapshot dataSnapshot) { for (DataSnapshot childSnapshot: dataSnapshot.getChildren()) { System.out.println(childSnapshot.getKey()); // prints 0, 1, etc System.out.println(childSnapshot.getValue(String.class)); // prints "Feminismo", "Racismo", etc } } @Override public void onCancelled(@NonNull DatabaseError databaseError) { throw databaseError.toException(); // don't ignore errors } }); 的{​​{1}}将重新呈现并在模糊时运行验证。
错误反馈<input>旁边的type="number"中有一个值建议按钮,单击该按钮将在输入中填充建议值(由异步验证器提供)。
但是,如果您第一次单击该按钮,<div>的模糊将触发整个元素的重新渲染,因此不会影响输入。您必须再次单击该按钮才能使其正常工作。

我没有找到任何禁用此重新渲染行为的选项。

演示:stackblitz.com

.ts文件:

<input>

HTML:

<input>

1 个答案:

答案 0 :(得分:0)

请注意the following note placed at the specs for input=number

  

注意:type = number状态不适用于恰好由数字组成但并非严格意义上为数字的输入。例如,信用卡号或美国邮政编码是不合适的。确定是否使用type = number的一种简单方法是考虑输入控件具有Spinbox界面是否有意义(例如,带有“向上”和“向下”箭头)。将信用卡号的最后一位数字弄错不是一个小错误,就像让每个数字都不正确一样是错误的。因此,用户使用“上”和“下”按钮选择信用卡号是没有意义的。如果不适合使用Spinbox界面,则type = text可能是正确的选择(可能带有pattern属性)。

我不得不问:为什么不只使用type=text