Angular 输入类型=数字验证在角度模式下工作不正常

我希望input type=number接受介于0.1和0.9之间的十进制数（在点之后只允许有一个十进制数，例如：0.11是不允许的），还可以接受数字1。
我正试图从指令中限制它。该指令似乎有效，但我按下了提交按钮，表单控件的值不正确。
例如，如果我键入0.11，则输入中将显示0.1，但表单控件的值为0.11。
如果键入1到9之间的数字，则输入为空，但表单控件具有该数字的值。

---

这里有一个stackblitz链接：

发生这种情况是因为您正在更新DOM，而不是表单模型。最简单和常见的方法之一是从指令发出事件，并在事件处理程序中更新表单模型，如下所示

**修改指令

import { Component, Output, EventEmitter } from "@angular/core";
//other import statements

@Directive({
  selector: "[appLimitDecimal]"
})
export class LimitDecimalDirective {
  @Output()
  purgedValue: EventEmitter<any> = new EventEmitter();
  @HostListener("input", ["$event"])
  changes(evt: any) {
    const removeLastChar = evt.target.value.substring(
      0,
      evt.target.value.length - 1
    );
    // if decimal number length is bigger than 3
    if (evt.target.value.length > 3) {
      console.log("fromDirective", removeLastChar);
    }
    // decimal numbers from 0.1 to 0.9 and 1
    // remove last character if does not match regex
    if (!/^(?:0(?:\.[1-9])?|1)$/.test(evt.target.value)) {
      // evt.target.value = removeLastChar;
      this.purgedValue.emit(removeLastChar);
    }
  }
}

我希望这对你有帮助

<input
  type="number"
  formControlName="numberInp"
   appLimitDecimal
  (purgedValue)="setValue($event)"
  min="0.1"
  max="1.0"
  step="0.1"
 />

  setValue(val) {
    this.f.patchValue({ numberInp: val });
  }