函数内的Angular 2 ngModel

Question

我正在尝试将 ngModel 传递给函数并获取更改，

不知道怎么用。

这是我现在得到的：

          <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>

....等等...

然后在我的 page.ts 我得到了

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);
}

我不想做：

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

因为您可能认为我一周中的每一天都有，所以我不想每天都有这样的功能：

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

我需要一些动态的东西。

我该如何解决这个问题？

提前致谢

[解决方案] @AJT_82

解决方案不是使用我的 ngModel 并尝试更新它，而是从表单访问控件。

在您的 page.html 中

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

然后在你的 page.ts 中

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

现在就像一个魅力！ 感谢@AJT_82

Answer 1

由于您有一个表格，我建议您完全跳过ngModels 并使用您拥有的表格。正如您所解释的，仍然有点不确定this.clientAction.transformInput(input) 应该做什么，以某种方式转换值。您应该能够将其合并，也许在您提交表单时？无论如何，如前所述，您将表单值安全地存储在表单创建的对象中，对您来说看起来像这样：

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

当您输入字段时，您可以使用valueChanges 捕获每个按键，您可以在其中访问完整的表单：

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

当你需要的时候，你也可以通过访问每个表单控件，这里访问星期一：

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

这样就免去了为每个表单值使用ngModel 的麻烦。

因此，您可以通过以下几种方式截取这些值，然后在您需要/需要时在某个时间点“转换”它们。这样做最好的地方可能是提交表单时，循环值并转换它们。这完全是动态的，正如您所希望的，并且不需要 7 个函数来转换每个表单控件！ ;)

希望这对您有所帮助，这是一个 plunker（也请检查控制台）。

Plunker

Answer 2

当您使用 ngModel 时，为什么要将其传递给函数

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

并使用 ngModel 本身作为处理

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

更新 1：

我知道您正在寻找在用户键入时转换文本框值。 Check Custom Directive