Можно ли одновременно связывать входные данные с двумя переменными в угловом?

Это типичный угловой материал matInput:

<input matInput [(ngModel)]="model.property" name="property" />

Теперь, чтобы применить логику при изменении модели, общее решение, предлагаемое другими разработчиками в SO, - это разбить бананы в коробке на выражения для привязки свойств и событий:

<input matInput [ngModel]="model.property" (ngModelChange)="model.property=someLogic($event)" />

Основываясь на этой логике, я создал функцию digitGroup которая получает входной номер, помещает запятые между каждыми тремя числами и показывает, что в поле matInput.

Однако проблема заключается в том, что теперь model.property представляет собой строку, представляющую число сгруппированной по цифре, а не как реальный номер JavaScript, поэтому в каждом месте мне нужно получить доступ к ее значению и выполнить некоторую математическую операцию на нем, мне нужно undigitGroup(model.property) первый.

Возможно ли, что я привязываю matInput к двум свойствам model одновременно? Таким образом, у меня может быть model.property для вычислений и model.digitGroupedProperty чтобы показать пользователю, оба в то же время.

Ответы

Ответ 1

Вы можете использовать каналы для отображения модели, преобразованной функцией digitGroup без изменения модели.

@Pipe({name: 'groupDigits'})
export class DigitGroupPipe implements PipeTransform {
  transform(value: any) {
      // Call your digitGroup() function here, then return result
  }
}

Затем используйте их следующим образом:

<input matInput [ngModel]="model.property | groupDigits" (ngModelChange)="model.property=$event" />

Таким образом, ваша model не будет мутирована вашей digitGroup(), только в представлении

Ответ 2

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

  1. В вашем компоненте запустите локальную переменную modelPropertyRaw modelPropertyRaw = digitGroup(model.property) в ngOnInit
  2. Привязать ввод к локальной переменной modelPropertyRaw
  3. Добавить (input)="onPropertyChange($event.target.value)" на ваш вход
  4. В onPropertyChange do model.property = undigitGroup(modelPropertyRaw)

Это отдельное истинное значение из показанного значения.

EDIT: в вашем.html файле

<!-- Replaced (ngOnModelChange) by (input). Notice that you are not forced to pass the event for the behavior we want -->
<input matInput [ngModel]="modelPropertyRaw" (input)="onPropertyChange($event.target.value)" />

В файле.ts

Добавьте локальную переменную modelPropertyRaw (вы также можете добавить ее как атрибут вашего класса модели)

modelPropertyRaw: string;

Добавьте функцию onPropertyChange как это

onPropertyChange(inputText: string)
{
  model.property = undigitGroup(modelPropertyRaw);
}

Это ! Если вам не нужна локальная переменная компонента, добавьте propertyRaw в качестве атрибута модели и используйте его вместо modelPropertyRaw в этом коде