Angular2 Nativescript：使用 ngModelChange 自动重新格式化 TextInput - 为什么这不起作用？答案

【问题标题】：Angular2 Nativescript: auto-reformatting TextInput with ngModelChange - why does this not work?Angular2 Nativescript：使用 ngModelChange 自动重新格式化 TextInput - 为什么这不起作用？
【发布时间】：2017-02-22 18:20:09
【问题描述】：

我正在尝试在输入时将用户输入重新格式化为文本字段。例如，假设我想将输入限制为数字，并实现 4 个字符的 maxLength，并在其前面加上一个“+”号用于显示。

我正在重新格式化 IRL，但这应该是一个例子......

export class MyComponent {
    private _myField: string;
    myFieldDisplay: string;

    onMyFieldDisplayChange(event) {
        // I can see the display field has the correct value here
        console.log(this.myFieldDisplay);

        this._myField = event.replace(/\D/g, '').substring(0, 4);
        this.myFieldDisplay = "+" + this._myField;

        // and I can see the display field has the correct value here
        console.log(this.myFieldDisplay);
    }
}

这是我的模板代码：

<TextField 
    [ngModel]="myFieldDisplay" 
    (ngModelChange)="onMyFieldDisplayChange($event)">
</TextField>

我的期望是它将存储私有变量_myField，重新格式化myFieldDisplay，并始终在TextField中显示myFieldDisplay的重新格式化值。

发生的情况是 - 我可以看到 myFieldDisplay 在控制台中始终正确重新格式化，但这并不总是反映在 TextField 中。 TextField 总是允许超过 4 个字符，而且它似乎只在 第一次更改时去掉了非数字字符。即，如果输入的字符不是数字，它仅在第一次按键时才起作用，并且仅有时。此外，“+”号仍然可见。

将myFieldDisplay 记录到控制台让我难以置信，看到它总是具有正确的值，但看不到在 TextField 中反映的值。

我试过使用这个NativeScript Masked Input 插件，但它不太适合我的用例，我想要更严格的验证。

什么给了？有可能做我想做的事吗？有没有更简单的方法来完成我没有看到的？

对于它的价值，我对 NativeScript、TypeScript、Angular2 和移动应用程序开发还很陌生，所以......如果我遗漏了一些明显的东西，我不会感到惊讶。谢谢！

【问题讨论】：

如果您在更改文本后点击屏幕其他位置的按钮或类似的东西，TextField 会得到更新吗？
在您的函数 onMyFieldDisplayChange(event) 上，该事件将在文本字段中显示更改。尝试在函数中记录 console.log(event) 然后您将在文本字段中获得更改。对于屏蔽的输入库。这是我设法格式化文本字段github.com/dlucidone/nativescript-maskedinput-example的方法
@Dlucidone 我以前真的看过你的回购！但就像我说的，我已经尝试过 maskedinput 库，但它不适用于我的用例
@EileenNoonan Wat 你问的问题很容易使用 ngModelchange。你在哪里卡住了？你能解释一下你的用例吗？
@Dlucidone 我的用例与任何其他输入屏蔽非常相似。我只是无法让它在 NativeScript 中工作。 ngModelChange 不工作。除非我以某种方式错误地使用它？因此问题......上面的代码示例产生了描述的错误。如果我能让它工作，那么理论上我应该能够让我的实际代码工作。

标签： angular nativescript angular2-nativescript

【解决方案1】：

你可以让它像这样工作 -

HTML

 <TextField id="checkingPhoneNumber" (ngModelChange)="PhoneNumberCheck($event)" hint="Phone Number" keyboardType="number" autocorrect="false" autocapitalizationType="none" returnKeyType="next" [(ngModel)]="phoneNumber"></TextField>

TS

 `import textFieldModule = require("ui/text-field");
 import observableModule = require("data/observable");

 PhoneNumberCheck(args){
 var TextInputView = this.page.getViewById<TextField>("checkingPhone");
 TextInputView.on(textFieldModule.TextField.propertyChangeEvent,function(eventData:observableModule.PropertyChangeData){
  if (eventData.propertyName == "text" && eventData.value.length > 10) {
   setTimeout(
     function() { 
      TextInputView.text = eventData.value.substr(0, 10);
    }, 0);
  }
  });
  }`

在这里，文本字段输入将在文本长度达到 10 时立即获得子字符串。

【讨论】：

【解决方案2】：

@Elleen Noonan 要在 Angular-2 中使用双向绑定，您需要导入 FormsModule，更具体地说，在 NativeScript 中，您需要在相应的 @NgModuleNativeScriptFormsModule 的包装器/p>

例如要使用this two-way binding，我们需要import the NativeScriptFormsModule here

更多关于双向绑定here

【讨论】：

我正在导入 NativeScript 的表单模块，并且一直这样做。我是 NS 等的新手，但我在这个应用程序中还有其他几种形式已经在使用双向数据绑定。