Question

我是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变量并使用条件，即length <5。

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

我希望它对type =“ number”有效，对于字符串，它对我来说具有maxlength属性。

Answer 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

Answer 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

ngModel绑定无法在angular5中按预期方式工作

2 个答案: