[Fixed] reactive forms pattern IE11

Issue

I have this form:

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

With the following inputs:

      <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>

This works as intended on chrome however in IE I am able to write both numbers and characters without getting an error message.

Can anyone tell me what I might be missing?

Solution

I think the pattern validation actually doesn’t work in neither Chrome nor IE. I agree with Petr Averyanov’s answer. You can also refer to this thread and this doc. In the doc, it says:

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

You can change the input type to type="text", then it can work in both IE and Chrome.

Result in IE 11: