Javascript 角度：更改输入事件的值

我有一个短信区。我尝试将值的宽度限制为10个符号。我试图在

input

事件上剪切值

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

更改消息（）{
this.smsMessage=this.smsMessage.substr（0,10）；
console.log（this.smsMessage）；
}

但它不起作用。我在

changeSMSMessage（）

方法中看到了该值，但在UI上我看到的是未更改的值。

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

当我将事件从

input

更改为

keyup

时，它开始正常工作。删除第十个字符之后的所有字符

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

---

那么，有人能解释一下为什么is

input

事件不更新

textarea

中的值吗？

您有几个选项：

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

1-使用文本区域的

maxlength=“10”

标记：

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

<textarea [(ngModel)]="smsMessage" maxlength="10"></textarea>

2-将a与a一起使用：

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

3-控制输入：

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

<textarea [(ngModel)]="smsMessage" (change)="changeSMSMessage()"></textarea>


// TS
changeSMSMessage() {
    this.smsMessage = this.smsMessage.length > 10 ? this.smsMessage.substr(0, 10), this.smsMessage;
}

//TS
更改消息（）{
this.smsMessage=this.smsMessage.length>10？this.smsMessage.substr（0,10），this.smessage；
}

在初始化组件时，使用formControl并订阅其值更改，这将允许您使用rxjs运算符满足高级需求，如执行http请求、应用解Bounce直到用户写完一句话、获取最后一个值并忽略上一个值

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'some-selector',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormControl}；
从'rxjs/operators'导入{debounceTime，distinctUntilChanged}；
@组成部分({
选择器：“某个选择器”，
模板：`
`
})
导出类SomeComponent实现OnInit{
私有搜索控制：FormControl；
私人去盎司：数字=400；
恩戈尼尼特（）{
this.searchControl=新表单控件（“”）；
this.searchControl.valueChanges
.pipe（debounceTime（this.debounce），distinctUntilChanged（））
.subscribe（查询=>{
console.log（查询）；
});
}
}

这样做的好处是什么？？您可以直接使用

maxlength=“10”

属性，该属性不允许用户键入超过10个符号，我必须显示带有消息“SMS长度大于250”的弹出窗口。在示例中，我删除了该代码。我认为您应该尝试（oninput）Woops，忘记更改属性绑定！抱歉。1）我无法使用

maxlength=“10”

，因为我需要显示带有错误消息的弹出窗口。2） 我会读这篇文章。谢谢3）

（更改）

不起作用。我在Plunker中更改了事件，但它仍然没有剪切smsMessage的宽度。然后使用

按键

，正如我在问题中所说的，这个示例使用

（keup）=“changeSMSMessage（）”

。但我想了解为什么它不能与

（输入）

事件一起工作。

按键

不能工作，因为它在执行

更改消息（）后添加了按下的符号。最后我有11个符号，而不是10个