如何使用ngModelChange清除或编辑Angular输入框？

我做了一个Angular模板驱动表单的示例，用来演示ngModelChange的用法，相关的组件代码在template-driven-form.ts文件里。

对应的HTML模板代码 #

<h1>(ngModelChange) Example:</h1>
<p>
  <label>Number:</label>
  <input type="tel" [(ngModel)]="expiration" (ngModelChange)="onChange($event)" name="expiration" required>
</p>

Angular组件代码片段 #

expiration: string = '';

onChange(event) {
  if (this.expiration) {
    let expira... // 这里是你还没写完的逻辑部分
  }
}

这里要说明下，[(ngModel)]是Angular的双向绑定语法，而(ngModelChange)会在模型值发生变化时触发我们定义的onChange方法，参数$event就是当前更新后的模型值。如果需要对输入值做实时处理（比如格式化、即时校验），这个事件就非常实用。

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