Angular сбрасывает event.target.value, если ввод в числовом типе не является числом

Question

Я борюсь за третий день с этим вопросом. Я использую угловые динамические формы с formControl для привязки значений и проверки созданных элементов управления к форме. Также в комплекте: материал угловой.

У меня есть такая проблема: когда я набираю input в input type=number, то есть " 123." оно сбрасывает значение в пустую строку. После добавления еще одной цифры "123,3" значение устанавливается на 123,30, что является правильным.

Проблема заключается в том, что каждый раз, когда пользователь устанавливает значение, заканчивающееся точкой или запятой в конце, или имеет более 1 запятую / точку, или в принципе неправильно. Проверка Angular не запускается - поле становится пустым, значение равно '', и поэтому без какого-либо сообщения элемент управления пуст и форма действительна, даже если пользователь ввел некоторые данные. Я понял, что не позволю пользователю вводить второй период / запятую, но я не могу предотвратить это, потому что не могу проверить, поставил ли он уже запятую в случае '123.' так как значение получает ''. Это так запутанно.

Если я изменю на type=text, все работает нормально.

Из того, что я исследовал - это как-то связано с Access Value Number.

writeValue(value: number): void {
    // The value needs to be normalized for IE9, otherwise it is set to 'null' when null
    const normalizedValue = value == null ? '' : value;
    this._renderer.setProperty(this._elementRef.nativeElement, 'value', normalizedValue);
}

registerOnChange(fn: (_: number|null) => void): void {
    this.onChange = (value) => { fn(value == '' ? null : parseFloat(value)); };
}

Я попытался перезаписать его с помощью customValueAccessor, но безуспешно. Я также пытался использовать текст типа inpt, но мне нужно, чтобы на мобильных телефонах появлялась цифровая клавиатура, и я не могу заставить ее работать даже с pattern=\d*, потому что тогда сложная угловая проверка сводит с ума.

это немного моего кода:

import { FieldConfig } from '../../interfaces/field-config.interface';
import { Field } from '../../interfaces/field.interface';
import { LabelFieldConfig } from '../../interfaces/label-field-config.interface';
import { TextFieldConfig } from '../../interfaces/text-field-config.interface';

@Component({
  selector: 'form-input',
  templateUrl: './form-input.component.html',
  styleUrls: ['form-input.component.scss']
})
export class FormInputComponent implements Field, OnInit {
  config: FieldConfig & LabelFieldConfig & TextFieldConfig;
  group: FormGroup;
  formControl: AbstractControl;

  onBlur(): void {
    let value = this.formControl.value;
    value = this.config.format(value);
    if (this.formControl.valid) {
      this.formControl.setValue(value);
    }
  }

  keyDown(event: any): void {
    const { keyCode } = event;

    if (!this.config.isValidKeyCode(keyCode)) {
      event.preventDefault();
    }
  }

  ngOnInit() {
    this.formControl = this.group.controls[this.config.name];
  }
}

Есть идеи? Ваша помощь будет высоко ценится. Или, может быть, вы знаете, как заставить цифровую клавиатуру вводить текст? Это было бы также полезно.

Если вам понадобится дополнительная информация, я с удовольствием предоставлю ее. Спасибо