离子4-双向结合[(ngmodel)]

Question

我正在努力在离子4中使用两种绑定。我曾经使用离子3，而两种方式绑定非常容易，我不确定为什么要挣扎。<<<<<<

在我的app.module.ts中我导入：

import { FormsModule } from '@angular/forms';
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    RoundProgressModule,
    FormsModule,
    HttpClientModule
  ],

在我的页面上的 .ts文件上，我只是启动一个变量：

user:any = { phone: '', name: '', date: '' }

，然后我有一个函数来更改user.phone

的格式

formatNumber() {
    let num = this.user.phone;
    this.user.phone = new AsYouType('US').input(num) // a package to format numbers
    console.log(this.user.phone)
  }

console.log产生正确的信息，但在input字段中不会改变。

我的.html文件看起来像这样：

 <form>
    <input class="phone-input" name="phone" type="text" placeholder="[phone]" (ngModelChange)="formatNumber()" [(ngModel)]="user.phone">
 </form>

对我来说，这似乎都应该工作...我在做什么错？对我来说似乎不是很明显。

谢谢！

Answer 1

尝试这个，

<form>
    <input class="phone-input" name="phone" type="text" placeholder="(123) 456- 
    7890" (input)="formatNumber()" [(ngModel)]="user.phone">
</form>

input代替ngModelChange。

Answer 2

正确使用[ngmodel](ngmodelchange(必须像

<input class="phone-input" name="phone" type="text" placeholder="[phone]" 
    (ngModelChange)="formatNumber($event)" [ngModel]="user.phone">

将$ event作为参数和您的函数

formatNumber(num) { //<--see the argument
    this.user.phone = ....
    console.log(this.user.phone)
  }