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)
  }

离子4-双向绑定[（ngModel）]

2 个答案: