javascript - 函数内的 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
})

当你需要的时候，你也可以访问各个表单控件，这里访问monday:

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

因此，这消除了为每个表单值使用 ngModel 的麻烦。

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

希望这对你有帮助，这里有一个 plunker(同时检查控制台)。

Plunker