Question

我正在尝试将用户输入重新格式化为输入的文本字段。例如，假设我想将输入限制为数字，并实现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和移动应用程序开发都很陌生......所以如果我遗漏了一些明显的东西，我不会感到惊讶。谢谢！

Answer 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就会得到子字符串。

Answer 2

@Elleen Noonan要在Angular-2中使用双向绑定，你需要导入FormsModule，并且在NativeScript中更具体一点，你需要在相应的@NgModule中导入名为 NativeScriptFormsModule 的包装器/ p>

e.g。要使用this two-way binding，我们需要import the NativeScriptFormsModule here

有关双向绑定的更多信息here

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

2 个答案:

HTML

TS