老师您好，问一个常见的 input双向绑定的问题
来源：3-6 组件的双向绑定
蜻蜓01
2019-06-30
如果有一个需求：限制 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);
}
}
}
写回答
2回答
-
蜻蜓01
提问者
2019-06-30
谢谢老师回答， 不过这个限制 6 个字符是一个例子，如果需求复杂一些，不能用 html 标签提供的校验支持，比如输入的内容必须包含“hello”等，必须做自己的逻辑校验的，我想在自己的函数中做校验和限制，就是类似我上面举得例子，该如何灵活的控制呢，O(∩_∩)O谢谢啊。（我上面的例子可以增加 settimeout 解决，但是感觉不友好）
142019-06-30 -
接灰的电子产品
2019-06-30
<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>
00
相似问题