Angular 5 触发自定义函数的最佳 ng-change/ngChange 事件是什么？

Question

我正在尝试获取 ng-change 事件来更新我通过这样做编写的函数。目前，该函数仅将 "I am here" 记录到控制台。我是这样实现的：

<input type="number" ng-minlength="1" ng-maxlength="3" min="5" max="100" class="form-control" name="percentOwnership" (ng-change)="fullyOwned()"  [(ngModel)]="individualowner.percentOwnership">

我尝试取消单向绑定括号并添加双向绑定括号和方括号，但没有任何东西触发我将 "I am here" 记录到控制台的功能。

我也使用 "change" 和 "ngModelChange" 尝试过这些组合。仍然，没有什么能激发我的功能。我正在使用 Angular 5.2.9

Answer 1

您需要分别使用[ngModel]和(ngModelChange)。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="number" [ngModel]="percent" (ngModelChange)="onPercentChange($event)" />
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  percent = 20;

  onPercentChange(percent: number) {
    console.log('here');  

    this.percent = percent;
  }
}

Live demo

您的 min="5" max="100" 验证也不会按预期工作。它们已在 Angular 4.2 中删除。 Read more about the issue.

Angular 5 触发自定义函数的最佳 ng-change/ngChange 事件是什么？

What is the best ng-change/ngChange event for Angular 5 to fire a custom function?

angular

input

angular5

angularjs-ng-change