如何在formControl指令以角度获取输入之前更改输入值答案

【问题标题】：how to change value of input before formControl directive get it in angular如何在formControl指令以角度获取输入之前更改输入值
【发布时间】：2021-03-23 19:17:57
【问题描述】：

需要将此输入<input type="text" formControlName="mobile" myCustomDirective /> 中的波斯数字转换为英文数字。所以创建了一个指令，输入波斯数字事件以该值触发，然后我将其更改为英文数字，所有事件再次以英文数字触发。如果我阻止事件触发第二次更改，那是错误的，因为我需要使用英文数字触发事件。实际上，我需要在FormControl 指令捕获它之前获取输入的值并将其更改为英文。有什么解决办法吗？

【问题讨论】：

另一种解决方案是使用 Angular 管道将波斯数字转换为英文数字。详细信息和示例：angular.io/guide/pipes.
我会为此编写一个 CustomValueAccessor
@MilanTenk 以及如何在响应式表单的输入上使用它？

标签： angular angular-reactive-forms angular-directive form-control controlvalueaccessor

【解决方案1】：

终于可以解决我的问题了：

import { DecimalPipe } from '@angular/common';
import { Directive, ElementRef, forwardRef, HostListener } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Directive({
selector: '[appInputConvertNumbers]',
providers: [
 {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => InputConvertNumbersDirective),
  multi: true
 },
  DecimalPipe
]
})
export class InputConvertNumbersDirectiveimplements ControlValueAccessor {
private _onChange: (value: any) => {};
  constructor(private _elementRef: ElementRef) { }
  @HostListener('input') onInput() {
    let value = this._elementRef.nativeElement.value;
    let newValue = this.setInputValue(value);
    this._onChange(newValue);
  }
  private setInputValue(value: string): string {
    value = value.replace(/[۰-۹]/g, number => '۰۱۲۳۴۵۶۷۸۹'.indexOf(number).toString())
    this._elementRef.nativeElement.value = value;
    return value;
  }
  writeValue(value: string): void {
    this.setInputValue(value);
  }
  registerOnChange(fn: any): void {
    this._onChange = fn;
  }
  registerOnTouched(fn: any): void {
  }
}

而且我可以简单地以我可以使用这个指令的形式

<form [formGroup]="exampleForm">
  <input appInputConvertNumbers formControlName="number">
</form>

【讨论】：