反应形式模式 IE11

Question

我有这个表格：

   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 中我可以输入数字和字符而不会收到错误消息。

谁能告诉我我可能遗漏了什么？

Answer 1

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

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

Answer 2

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

<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.

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

IE 11 中的结果：

反应形式模式 IE11

reactive forms pattern IE11

javascript

forms

internet-explorer

angular