Angular 5中触发自定义函数的最佳ng-change事件及绑定失效排查

嘿，你这里踩了AngularJS和Angular（2+）语法混淆的坑啦！在Angular 5（以及所有Angular 2+版本）里，没有ng-change或者(ng-change)这种写法——那是AngularJS（1.x）的指令语法。

要触发输入框值变更时的自定义函数，你需要用这两个事件之一：

1. (change) 事件 #

这个事件会在输入框失去焦点且值确实发生变化时触发，适合不需要实时响应、只在用户完成输入后执行逻辑的场景。

修改后的代码应该是这样：

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

2. (input) 事件 #

如果需要实时监听每一次输入变化（比如用户输入数字、点击上下箭头调整数值、删除内容时立即触发函数），就用(input)事件：

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

另外补充个小细节：你代码里的ng-minlength和ng-maxlength也是AngularJS的指令，Angular 5里对于type="number"的输入，直接用原生的min和max属性就足够限制数值范围了；如果需要更严谨的表单验证，可以结合Angular的响应式表单或模板驱动表单验证器来实现。

内容的提问来源于stack exchange，提问作者BlockchainDeveloper