Ionic 4 - 双向绑定 [(ngModel)]

Question

我在 Ionic 4 中难以使用双向绑定。我以前使用 Ionic 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="(123) 456-7890" (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="(123) 456-7890" 
    (ngModelChange)="formatNumber($event)" [ngModel]="user.phone">

将 $event 视为参数，以及您的函数

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

Ionic 4 - 双向绑定 [(ngModel)]

Ionic 4 - Two way binding [(ngModel)]

ionic-framework

angular

ionic4

angular6