Формирование числа/валюты в директиве Angular 6

Вот что вы можете сделать, чтобы решить эту проблему:

<input [ngModel] = "item | customCurrencyPipe:'USD':'symbol':'2.2'" name = "inputField" type = "text" 
(ngModelChange) = "item = $event||0.00" [ngModelOptions] = "{updateOn:'blur'}"/>

1) Разделите привязку на одностороннюю привязку и привязку события.

2) С привязкой к событию "ngModelChange" восстанавливает значение с предоставленным вводом.

3) Обновить значение на «размытие», поэтому любой текст, который не является числом, не может быть обслужен // необязательно в зависимости от требований

4) customCurrencyPipe : это будет иметь функции валютной трубы по умолчанию, но не будет увеличиваться, если номер не указан, вместо этого будет возвращено значение по умолчанию или не будут разрешены другие числа, кроме чисел // в зависимости от требования

Выполняя описанные выше шаги, вы сможете достичь желаемых результатов с меньшим количеством взломов и многообещающим решением.

Я бы использовал все средства доступа к значениям. Это то, что я использую для всех своих входов. Вы можете написать что-то вроде этого

@Component({
  selector: 'ks-input',
  template: `<input [(ngModel)] = "value" />`,
  styleUrls: ['./whatever.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})

export class InputComponent implements ControlValueAccessor {

  @Input('value') _value = '';
  onChange: any = () => {
  };
  onTouched: any = () => {
  };

  get value() {
    return this._value;
  }

  set value(val) {
    this._value = val;
    this.onChange(val);
    this.onTouched();
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  writeValue(value) {
    this.value = value;
  }
}

Когда вы передаете переменную этому компоненту, она сначала проходит через функцию writeValue, где вы можете выполнить любое начальное форматирование. вы также можете делать что угодно в функции установки значения, которая вызывается каждый раз, когда изменяется значение/ввод переменной ngModel.

Решение заключается в форматировании значения ввода внутри ngDoCheck() вместо ngOnChanges().

ngDoCheck() — это гарантированный хук жизненного цикла, который будет запускаться каждый раз при обнаружении изменения триггера Angular.

Небольшой рабочий пример показывает, что ngDoCheck() ловушка директивы всегда будет срабатывать при изменении.

Чтобы понять, почему ngOnChanges() не поднимается все время и зачем вместо этого использовать ngDoCheck():

Всякий раз, когда изменяется связывающее свойство Input из директивы, оно запускает обнаружение изменений Angular. И как Angular определить, изменился ли этот Input? Он сравнивает объект Простое изменение, представляющий, что старые и новые значения Input, если между ними есть различия, то Angular запускает крючок жизненного цикла ngOnChanges().

Таким образом, есть случай, когда вы что-то ввели, но сравниваемое значение не изменилось (например, вы изменили Input с помощью mutate и свойства Object, поэтому на самом деле старое и новое значение Простое изменение одинаковы, потому что Angular сравнивает ссылку, не значение), в этом случае он не поднимает хук ngOnChange().

Но ngDoChek() — это нечто другое. Я буду использовать эту информацию из очень хорошей статьи относительно ngDoCheck():

Предположим, у нас есть следующие компоненты/дерево директив:

Component A
    Component B
        Component C

Поэтому, когда Angular запускает обнаружение изменений, порядок операций следующий:

Checking A component:
  - update B input bindings
  - call NgDoCheck on the B component
  - update DOM interpolations for component A
 
 Checking B component:
    - update C input bindings
    - call NgDoCheck on the C component
    - update DOM interpolations for component B
 
   Checking C component:
      - update DOM interpolations for component C

Как вы видите, всякий раз, когда выполняется обнаружение изменений, всегда вызывается ngDoCheck(). Кроме того, он также вызывается при инициализации компонента/директивы (сбросьте мой пример блицстека, чтобы увидеть это). Так:

Отформатируйте значение ввода внутри ngDoCheck(), чтобы решить вашу проблему.

У меня была точно такая же проблема, как у вас. Я смог решить эту проблему с помощью хука NgControl для доступа к элементу управления формой из директивы.

Я добавил NgControl в конструктор директив:

constructor(
  private el: ElementRef, 
  private decimalPipe: DecimalPipe,
  @Self() private ngControl: NgControl) { }

Таким образом, я смог подписаться на наблюдаемые изменения значения элемента управления формы. Наблюдаемые триггеры срабатывают как при изменении пользователя, так и при изменении кода, поэтому, чтобы избежать форматирования, пока пользователь печатает, я проверяю, что элемент управления нетронутый:

ngOnInit(): void {
  this.ngControl.valueChanges
    .subscribe(value => {
      if (this.ngControl.pristine) {
        this.el.nativeElement.value = 
          this.decimalPipe.transform(value, `1.2-2`);
      }
    });

Я надеюсь, что это может быть полезно для кого-то еще. Я почерпнул идею из этой статьи https://netbasal.com/attribute-directives-angular-forms-b40503643089