Angular 2 ngModel inside a function

Question

I'm trying to pass a ngModel to a function and get the change,

I don't know the way to use.

this is what I got now:

          <ion-input text-right
               formControlName="monday"
               type="number" pattern="[0-9]*"
               placeholder="00.00"
               [(ngModel)]="monday"
               (keypress)="onChange(monday)">
           </ion-input>

           <ion-input text-right
               formControlName="tuesday"
               type="number" pattern="[0-9]*"
               placeholder="00.00"
               [(ngModel)]="tueasday"
               (keypress)="onChange(tuesday)">
           </ion-input>

.... and so on...

Then in my page.ts I got

monday: string = '';
tuesday: string = '';
etc...

onChange(input: string){
//I want the input to correspond to my ngModel so it gets updated
    input = this.clientAction.transformInput(input);
}

I don't want to do:

this.monday = this.clientAction.transformInput(input);

Because as you may think I got all the day of the week so I don't want to have a function for every day like:

onChangeMonday(){};
onChangeTuesday(){};

I need something dynamic.

How can I resolve this issue?

Thanks in advance

[SOLUTION] @AJT_82

instead of using my ngModel and trying to update it, the solution was to access the controls from the form.

in your page.html

      <ion-input text-right
           formControlName="monday"
           type="number" pattern="[0-9]*"
           placeholder="00.00"
           [(ngModel)]="monday"
           (keypress)="onChange(monday, 'monday')">
       </ion-input>

then in your page.ts

onChange(input: string, day: string){
this.rateForm.controls[day].setValue(this.clientAction.transformInput(input));
}

works like a charm now !! Thanks @AJT_82

Answer 1

Since you have a form, I would suggest that you skip the ngModels altogether and make use of the form you have. Still a bit unsure about what this.clientAction.transformInput(input) is supposed to do, transform the values somehow, as you explained. You should be able to incorporate this, perhaps when you submit the form? Anyway, as said, you have your form values safely stored in the object created by the form, which would for you look something like this:

{
  "monday":null,
  "tuesday":null,
  "wednesday":null,
  // ... and so on
}

When you type in your fields you can capture every keypress with valueChanges, where you can access the complete form:

this.myForm.valueChanges.subscribe(res => {
  console.log("all form values: ", res) // here is an object with all your form values
})

When you need, you can also access each form control by, here accessing monday:

  console.log(this.myForm.controls['monday'].value) 

So this get's rid of the hassle to use ngModel for each form value.

So these are a couple of ways you can intercept the values and then "transform" them at some point, when you want/need to. Probably best place to do so, is when submitting form, loop the values and transform them. And this is totally dynamic, as you wished for, and do not need 7 functions to transform each form control! ;)

Hope this helps you, and here's a plunker (check the console as well).

Plunker