老师您好，问一个常见的 input双向绑定的问题

Question

如果有一个需求：限制 input 输入框内的文字的数量，超出 6 个则显示6 个
比如，我依次输入 123456，当输入 7 的时候，input 中还是显示 123456，此时用双向绑定改如何实现呢？ O(∩_∩)O谢谢

模板：

<input type="text" [(ngModel)]="userName" (ngModelChange)="checkName($event)">

组件：

export class AppComponent {
    userName = '';
    checkName(userName: string) {
        if (userName.length > 6) {
            this.userName = userName.substring(0, 6);
        }
    }
}

Answer 1

提问者 蜻蜓01 2019-06-30 22:36:21

谢谢老师回答， 不过这个限制 6 个字符是一个例子，如果需求复杂一些，不能用 html 标签提供的校验支持，比如输入的内容必须包含“hello”等，必须做自己的逻辑校验的，我想在自己的函数中做校验和限制，就是类似我上面举得例子，该如何灵活的控制呢，O(∩_∩)O谢谢啊。（我上面的例子可以增加 settimeout 解决，但是感觉不友好）

• 接灰的电子产品 #1

  这个不是 html 标签的检验，而是 ng  的 validator ，这个涉及到表单的概念，一句两句说不清楚，具体看一下我的简书吧  https://www.jianshu.com/p/0f9edcd7d6c3
  
  https://www.jianshu.com/p/49c21412014c
  
  https://www.jianshu.com/p/d5d2f5d39bbc

• 提问者 蜻蜓01 #2

  好的，谢谢老师，那最后总结下，是不是此类需求推荐用 ng 的表单校验 ，而不是自己写上面例子逻辑来控制校验呢

• 接灰的电子产品 #3

  是的，表单是 ng 的亮点之一，尽量多体会一下

点开查看后面1条评论

Answer 2

接灰的电子产品 2019-06-30 22:21:42

<input id="username" name="username"
      required maxlength="6"
      [(ngModel)]="username" >
<div *ngIf="username.invalid && (username.dirty || username.touched)">

  <div *ngIf="username.errors.required">
    用户名是必填项
  </div>
  <div *ngIf="username.errors.maxlength">
    用户名不能超过 6 个字符
  </div>
</div>