Angualr输入框校验只能输入字母

最新推荐文章于 2022-06-16 15:34:12 发布

原创最新推荐文章于 2022-06-16 15:34:12 发布 · 680 阅读

0 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Angular中使用keyup事件实现实时校验输入框仅允许输入字母的方法，解决了ngModelChange事件数据更新后无法立即渲染的问题。

<input nz-input #box (keyup)="onClickItem(box.value)" [(ngModel)]="orderRuleList.wordPrefix" placeholder="" maxlength="5">

// 只能输入字母
  public onClickItem(value) {
    const reg = /^[a-zA-Z]$/;
    if (reg.test(value) === false) {
      const x = value.replace(/[^a-zA-Z]/g, ''); // 把非字符的替换为空
      this.orderRuleList.wordPrefix = x;
      return this.orderRuleList.wordPrefix;
    }
  }

解释：Angualr输入框校验只能输入字母，采用keyup事件可实时校验，解决ngModelChange事件数据获取后不能及时渲染到页面的问题；