Angular中类型是number的input的value问题

前端之家收集整理的这篇文章主要介绍了Angular中类型是number的input的value问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在Angular7中使用type=number 的input,并用ngModel去绑定input的值。但是发现当输入小数点符号或者输入负号符的时候,ngModel获取的值和显示的并不一致。

html code:

<@H_403_14@div style="width: 200px; height: 34px; margin: 20px auto; ">
    <@H_403_14@input id="test" #eidtWeightInput 
    style="background-color: lightgoldenrodyellow;"
    class="a-text-input" value="99" type="number" minNum="0" maxNum="100" [(ngModel)]="num" (ngModelChange)="optimizeCheckLogic2()" />
</@H_403_14@div>

ts code:

 
 
  private num: string;
  @ViewChild(‘eidtWeightInput‘)
  private eidtWeightInput: ElementRef;
  ............

optimizeCheckLogic2() { console.log(‘[ngModel] this.num = ‘ + this.num); // ngModel console.log(‘jquery value=‘ + $(‘#test‘).val()); // jquery console.log(‘nativeElement.value = ‘ + this.eidtWeightInput.nativeElement.value); // nativeElement }

结果:

输入 1-

分享图片

 

输入 1-1

分享图片

输入 1.

分享图片

 

由上面的实例可见:

针对type=number的input, 只要输入的数字是不合法的,那么input对应的value就是null;但是显示内容依旧是输入的内容

猜你在找的Angularjs相关文章