ngModel 绑定在 angular5 中没有按预期工作

Posted 2023-02-16

【中文标题】ngModel 绑定在 angular5 中没有按预期工作

【英文标题】：ngModel binding is not working as expected in angular5

【发布时间】：2018-06-29 18:27:59

【问题描述】：

我是 Angular5 的新手。玩弄绑定。

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  template: `Title : <input type="text"  [(ngModel)]="title"  (ngModelChange)="onchange(title)" > newtitle`,
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = "app";
  newtitle = "";
  onchange(title:any)
    if(title.length < 5)
      this.newtitle = "hello "+title;
    

  

当 ngModel 发生变化时，ngModelchange 将值完美绑定到 newtitle 变量并使用条件，即长度

现在我的问题是，我想控制在输入框中输入的文本的长度。我希望输入框不允许用户输入长度> 5。

我希望它适用于 type="number"，对于字符串它适用于 maxlength 属性。

【问题讨论】：

可以使用 html 属性 maxlength => 输入>

【参考方案1】：

我了解您希望在长度超过 5 时限制输入。使用验证器 max 和 min 您可以控制错误消息，但不能阻止输入更多数字。 而是在 ngModelChange 事件上使用 keypress 事件。在该事件中，方法将拦截任何按键，如果模型值大于 99999（因此长度> 5），那么它将阻止其默认行为。检查其数值很重要：

HTML：

<input type="number" [(ngModel)]="title" (keypress)="onchange($event)"> 
newtitle

打字稿：

onchange(event) 
    if (Number(this.title) > 99999) 
      this.newtitle = "Hello " + this.title;    
      event.preventDefault();
    

Demo

【参考方案2】：

您可以使用 maxlength 并设置为 4：

<input maxlength="4" type="text" [(ngModel)]="title" (ngModelChange)="onchange(title)" > 

对于基于数字的输入：

<input max="9999" min="0" type="number" [(ngModel)]="title" (ngModelChange)="onchange(title)" > 

DEMO

【讨论】：

maxlength 仅适用于字符串，对吗？我正在使用 type="number"，无法重新创建它。所以我给了 type="text"。