Изменение отбражаемого значения в input

Question

Всем привет, у меня есть проблема я пытаюсь реализовать изменение отображаемого значения в форме Template

<form [formGroup]="priceForm">
  <input type="text" formControlName="price">
  <pre>{{priceForm.value | json }}</pre>
</form>

Component

priceForm: FormGroup;

  constructor(
    private transformPrice: TransformPricePipe,
    private fb: FormBuilder
  ) {
    this.priceForm = this.fb.group({
      price: new FormControl(""),
    })
    this.priceForm.valueChanges.subscribe(({price}) => {
      this.priceForm.setValue({
        price: this.transformPrice.transform(price)
      }, {
        emitEvent: false,
      })
    })
  }

Я ожидаю следующего поведения что при вводе в input числа 1000 в отобразилось 1 000 (для этого у меня Pipe), но значение формы 1000 - т.е форматировался бы только ввод, сейчас мой код так же изменяет и значение формы. Буду очень благодарен если подскажете в чем ошибка

Answer 1

Нашел решение через событие input Template

<h1>Sandbox</h1>
<input type="text" [formControl]="price" (input)="onChange($event)">
<pre>{{price.value | json }}</pre>
<hr>
<app-form></app-form>
<hr>

Component

public price: FormControl;
  constructor(private transformPrice: TransformPricePipe) {
    this.price = new FormControl("");
  }

  public onChange(event) {
    event.target.value = this.transformPrice.transform(event.target.value)
    this.price.setValue(this.price.value.replace(/ /g, ""), {
      emitModelToViewChange: false,
      emitViewToModelChange: false
    })
  }

БЛОГ НА HUSL

Изменение отбражаемого значения в input

Ответы (1 шт):