1

我有超过 5 个输入文本字段，仅接受 comm/dot 和 numbers。

[(ngModel)]="company.internetbill"
[(ngModel)]="company.electricitybill"
[(ngModel)]="company.waterbill"

ETC..

我为上述验证编写了一个自定义指令。它工作正常，我的要求是“当用户输入 - 逗号时，它必须更改小数（点）。

 commtodecimal(ref:any){
        if(ref.includes(",")){
        ref=ref.replace(",",".")
        this.user.internetbill=ref
  }

是否可以在同一自定义指令中更改 ngModel 值。这样我就可以对这两个功能使用相同的指令。

我的自定义指令是——

private regex: RegExp = new RegExp(/^[+-]?\d*[\.\,]?\d{0,8}$/g);
  private specialKeys: Array<string> = ['Backspace','ArrowLeft','ArrowRight','Delete'];
  constructor(private el:ElementRef) { }
  @HostListener('keydown',['$event'])onKeyDown(event:KeyboardEvent){
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
   const inputValue=this.el.nativeElement.value.concat(event.key)
    if(inputValue && !String(inputValue).match(this.regex)){
     event.preventDefault();
   }
   return
  }

或者请提出任何优化的方式。这样可以重用代码

4

1 回答 1

2

您可以使用自定义指令来实现这一点，我制作了一个简单的自定义指令来实现这一点，因此它可以在您的应用程序中为您的所有输入重用。

我会将此指令仅用于这项工作，遵循单一责任模式，如果不需要，则省略正则表达式和其他逻辑。

打开此 url 以查看实际示例和代码：https ://stackblitz.com/edit/angular-replacecommabydot-directive-ngmodel?file=src/app/replace-comma-by-dot.directive.ts

该指令能够修改 ngModel 的关键点是：

@Directive({
  selector: '[ngModel][replaceCommaByDot]', // use ngModel selector here
})
export class ReplaceCommaByDotDirective {
  @Output() ngModelChange = new EventEmitter(); // emit with the same output name

  @HostListener('input', ['$event.target.value'])
  onInputChange(value: string) {
    value = value.replace(',', '.');
    this.ngModelChange.emit(value); // here we emit and the input with the banana box will receive and set the value
  }
}
于 2022-02-07T10:43:39.260 回答