反应形式模式 IE11答案

【问题标题】：reactive forms pattern IE11反应形式模式 IE11
【发布时间】：2021-03-15 13:51:25
【问题描述】：

我有这个表格：

   this.form = this.formbuilder.group({
      weight: [weight, [Validators.pattern('^(0|[1-9][0-9]*)$')]],
      height: [height, [Validators.pattern('^(0|[1-9][0-9]*)$')]]
    });

使用以下输入：

      <input type="number" placeholder="Indtast din højde i cm" name="height" formControlName="height" class="form-control"/>
      <div *ngIf="form.get('height').dirty && form.get('height').invalid" class="error-text">
        No Letters
      </div>

     <input type="number" placeholder="Indtast din vægt i kg" name="weight" formControlName="weight" class="form-control"/>
      <div *ngIf="form.get('weight').dirty && form.get('weight').invalid" class="error-text">
        No Letters
      </div>

这在 chrome 上按预期工作，但在 IE 中，我可以同时写入数字和字符而不会收到错误消息。

谁能告诉我我可能错过了什么？

【问题讨论】：

标签： javascript angular forms internet-explorer

【解决方案1】：

我认为模式验证实际上在 Chrome 和 IE 中都不起作用。我同意 Petr Averyanov 的回答。也可以参考this thread和this doc。在文档中，它说：

<input type="number"> 元素不支持使用模式属性使输入的值符合特定的正则表达式模式。

您可以将输入类型更改为type="text"，然后在IE和Chrome中都可以使用。

在 IE 11 中的结果：

【讨论】：

【解决方案2】：

您的问题无效，模式在数字输入中从未起作用，现在也不起作用（刚刚在 Chrome 中使用输入“e”检查过）。

您需要将输入类型更改为文本或允许使用字母（实际上为什么不... 1e1 === 10 - 您可以添加验证输入是否为有效数字）

【讨论】：