Angular中類型是number的input的value問題

在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；但是顯示的內容依舊是輸入的內容。