Блог

Главная - Вопросы по программированию - как изменить значение ввода до того, как директива FormControl получит его в angular

как изменить значение ввода до того, как директива FormControl получит его в angular

#angular #angular-reactive-forms #angular-directive #form-control #controlvalueaccessor

#angular #angular-reactive-forms #angular-директива #form-control #controlvalueaccessor

Вопрос:

необходимо преобразовать персидские числа в английские в этом вводе <input type="text" formControlName="mobile" myCustomDirective /> . итак, создана директива, при вводе событий с персидским номером срабатывает с этим значением, затем я меняю его на английский номер, и снова все события срабатывают с английским. если я запрещаю запуск событий для второго изменения, это неправильно, потому что мне нужны события с английским номером. на самом деле, мне нужно получить значение ввода и изменить его на английский, прежде FormControl чем директива его перехватит. есть ли какое-либо решение?

Комментарии:

1. Альтернативным решением было бы использовать угловой канал для преобразования персидских чисел в английские. Подробности и примеры: angular.io/guide/pipes .

2. Я бы написал для этого CustomValueAccessor

3. @MilanTenk и как использовать его поверх ввода, который фигурировал в реактивных формах?

Ответ №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>