ngModel绑定在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;
    }

  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
模板：`Title:{{newtitle}}`，
样式URL:['./app.component.css']
})
导出类AppComponent{
title=“应用程序”；
newtitle=“”；
onchange（标题：任何）{
如果（标题长度<5）{
this.newtitle=“hello”+标题；
}
}
}

当ngModel发生变化时，ngModelchange完美地将值绑定到newtitle变量，并在长度小于5的条件下工作

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

---

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

您可以使用

maxlength

并设置为4：

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

对于基于数字的输入：

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

---

我知道当输入长度超过5时，您希望限制输入。使用验证器

max

和

min

可以控制错误消息，但不能阻止输入更多数字。 在

ngModelChange

事件上使用

按键

事件。在该事件中，方法将截获任何按键，如果模型值大于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();
    }
}

---

您可以使用HTML属性maxlength=>maxlength单独处理字符串，对吗？我正在处理type=“number”，无法重新创建它。因此，我已经给出了type=“text”。