Angular 自定义指令

Question

我有超过 5 个输入文本字段接受 仅 comm/dot 并且仅接受数字 。

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

等等

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

 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
  }

或者请建议任何优化方式。这样可以重用代码

Answer 1

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

我会只为这项工作留下这个指令，遵循单一职责模式，如果不需要，则省略正则表达式和其他逻辑。

打开此 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
  }
}

Angular 自定义指令

Angular Custom Directive

directive

typescript

ngmodel

custom-directive

angular