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>

工作示例