HTML /Angular 输入验证-允许数字和点,不允许破折号

g9icjywg  于 2022-12-02  发布在  Angular
关注(0)|答案(2)|浏览(186)

我有一个AngularForm,它将formControlName绑定到number类型的输入字段。
我想只接受数字和点。不幸的是,HTML属性标记number也接受破折号。这是我想避免的。是否有其他属性可以在HTML中工作,或者是否有合适的regEx表达式只允许数字和点?

HTML格式

<input name="myNumber" step="any" type="number" formControlName="myNumber">

角形/ TS

myForm = this.fb.group({
  question_number: null,
});
kyvafyod

kyvafyod1#

您可以将自定义指令与此regex /[^0-9.]/g一起使用,这将删除除数字和点以外任何其他字符
指令代码:

import { Directive, ElementRef, HostListener } from "@angular/core";

@Directive({
  selector: "[numberAndDot]"
})
export class NumberAndDotDirective {
  constructor(private element: ElementRef) {}

  @HostListener('input') inputChange() {

      this.element.nativeElement.value = this.element.nativeElement.value
      .replace(/[^0-9\.]/g, '')
      // Replace extra dots
      .replace('.', '%FD%')
      .replace(/\./g, '')
      .replace('%FD%', '.');
  }
}

模板代码:

<input numberAndDot name="myNumber" step="any" formControlName="myNumber">
bihw5rsg

bihw5rsg2#

这就像用大炮打苍蝇一样,但它会起作用。

myForm = this.fb.group({
         question_number: null,
      });
      this.myForm.controls['question_number'].valueChanges.subscribe(value => {
         this.myForm.controls['question_number'].setValue(value.replace(/[^0-9.]/g), ''))
      });

订阅某个输入不是一个好的做法,但在您找到更好的输入之前,这将一直有效(例如:

相关问题