validation issue (requiredPattern)

[rhanesoghlyan]

Due to this pattern (pattern="[0-9]*") my form-control is invalid when typing decimal number. When using other pattern plugin doesn't work

[aycron-dev]

I'm having the same problem

[mrchandoo]

you need to take out the form control from your auto validations by angular etc and do your own validation based on the form control value.

[rhanesoghlyan]

There is HTML validation for input field. pattern="[0-9]*"

[Artux-White]

Found a workaround. Leave the pattern as it is (pattern="[0-9]*") in the input element and then clear and then set the needed validators on input focus.

    this.myForm.controls["hours"].setValidators(null);
    this.myForm.controls["hours"].setValidators(
      Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
    );
    Object.keys(this.myForm.controls).forEach(key => {
      this.myForm.controls[key].markAsDirty();
    });
    this.myForm.updateValueAndValidity();