Is it possible to bind input to two variables at the same time in Angular?

Question

This is a typical Angular's Material matInput:

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

Now to apply logic when the model changes, a common solution proposed by other developers in SO is to break banana-in-the-box into property-binder and event-hook expressions:

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

Based on this logic, I created a digitGroup function that gets the input number, puts commas in between each three numbers, and shows that in the matInput field.

However, the problem is that now the model.property is a string representing the digit-grouped number, rather than being a real JavaScript number, so in each place I need to access its value and do some mathematical operation on it, I need to undigitGroup(model.property) first.

Is it possible that I bind matInput to two properties of the model at the same time? That way I can have model.property for calculations and model.digitGroupedProperty to show to the user, both at the same time.

Answer 1

You can use pipes to display the model transformed by digitGroup function without changing the model.

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

Then use them like this:

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

That way, your model will not be mutated by your digitGroup() function, only on the view

Answer 2

As Jed Cua said, you should be able to do it with pipe. But you can also do it manually with a local variable, having the local variable for user display and model property for calculations.

1. In your component, init a local variable modelPropertyRaw modelPropertyRaw = digitGroup(model.property) in ngOnInit
2. Bind input to local variable modelPropertyRaw
3. Add (input)="onPropertyChange($event.target.value)" to your input
4. In onPropertyChange, do model.property = undigitGroup(modelPropertyRaw)

This separate true value from shown value.

---

EDIT: In your .html file

<!-- 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)" />

In your .ts file

Add a local variable modelPropertyRaw (you can also add it as an attribute of your model class)

modelPropertyRaw: string;

Add onPropertyChange function like this

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

That's it ! If you don't want component local variable, add propertyRaw as an attribute of model and use it instead of modelPropertyRaw in this code