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

发布时间：2020-12-17 17:08:36 所属栏目：安全来源：网络整理

导读：在Angular7中使用type=number 的input，并用ngModel去绑定input的值。但是发现当输入小数点符号或者输入负号符的时候，ngModel获取的值和显示的并不一致。 html code： div style ="width: 200px; height: 34px; margin: 20px auto; " input id ="test" #eid

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

html code：

<div style="width: 200px; height: 34px; margin: 20px auto; ">
    <input id="test" #eidtWeightInput 
    style="background-color: lightgoldenrodyellow;"
    class="a-text-input" value="99" type="number" minNum="0" maxNum="100" [(ngModel)]="num" (ngModelChange)="optimizeCheckLogic2()" />
</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；但是显示的内容依旧是输入的内容。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!