HTML 中的無效數字輸入

Question

我希望以下 Angular 代碼（使用 Angular 12）在輸入無效時顯示“非法獎勵編號”。

正如您在屏幕截圖中看到的，當數字為 -1（小於輸入中定義的最小值）時，div 將按預期顯示。

但是，如果我輸入一些文本，例如1-或表達式3-4並將鼠標懸停在它上面，瀏覽器會告訴我我的輸入不是有效數字，但未顯示 div（這意味着 AwardInputRef.invalid是假的） 。

這是為什么？

這是相關的代碼

<label class="form-label" for="awardInput">Award</label>
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
  #awardInputRef="ngModel" />
<div *ngIf="awardInputRef.invalid">Illegal award number</div>

PS：

如果我將(blur)="onAwardBlur($event)"添加到獎勵輸入並在我的組件中添加一個函數

onAwardBlur(event) {
    console.log(event);
}

然后通過 log event.target.validity.valid調試代碼，我會看到它是false 。

該代碼可在stackblitz上找到。 Angular 版本有 11，即使我在那里輸入-1也不會顯示 div。

Answer 1

輸入：-1

您使用 [ - ] 這個特殊字符，因此該文件將變為 AwardInputRef.invalid。 所以div顯示。

輸入：1-

您首先使用的數字是wardInputRef.valid 或其他東西，但不是awardInputRef.invalid。

所以在這種情況下沒有顯示 div。

您只需檢查該字段並找到更改之前的更改。

Answer 2

作為 Angular 12 版的一部分，僅實現了 min 和 max 指令，這就是 stackblitz 版本不起作用的原因。

您可以使用本機輸入元素ValidityState解決您的問題

在輸入元素上定義另一個模板變量

<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
  #awardInputRef="ngModel" #inputRef />

然后你可以添加一些像這樣的自定義有效性：

<div *ngIf="awardInputRef.invalid
|| inputRef.validity.badInput && (awardInputRef.dirty || awardInputRef.touched)
">Illegal award number</div>

工作示例