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

【问题标题】：ngModel binding is not working as expected in angular5ngModel 绑定在 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 => 输入>

标签： angular angular5

【解决方案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"。