Angular 2 ng Model inside function

Question

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

I do not know how to use.

here 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 do not want to do:

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

Because, as you think, I got the whole day of the week, so I do not want to have a function for every day, for example:

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

I need something dynamic.

How can I solve this problem?

Thank you 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 on page.ts

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

works like a charm! Thanks @ AJT_82

Answer 1

Since you have a form, I would suggest that you skip ngModels and use the form you have. Still a little unsure of what this.clientAction.transformInput(input) should do, as it were explained, somehow convert the values. You should be able to include this, perhaps when you submit the form? In any case, as said, you have your form values ​​stored in the object created by the form, which looks something like this for you:

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

When you enter your fields, you can record each keystroke of valueChanges , where you can access the full form:

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

When you need to, you can also access each control here on Monday:

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

That way, it saves you from having to use ngModel for each form value.

So, these are a few ways that you can intercept values ​​and then "convert" them at some point when you need / need. Probably the best thing to do is when you submit the form, loop the values ​​and transform them. And it is absolutely dynamic, as you wanted, and does not need 7 functions to convert each control !;)

Hope this helps you, and here is the plunker (also check the console).

Plunker

Answer 2

When you use ngModel why do you want to pass the same thing to a function

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

and handle using ngModel itself as

 onChange(){ input = this.clientAction.transformInput(this.monday); } 

Update 1:

I realized that you are changing the value of the text field when the user enters it. Check user directive