Angular：更改输入事件的值答案

【问题标题】：Angular: change value on input eventAngular：更改输入事件的值
【发布时间】：2020-08-24 22:15:07
【问题描述】：

我有文本区域。我尝试将值的宽度限制为 10 个符号。我正在尝试降低 input 事件的价值。

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

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

但它不起作用。我看到 changeSMSMessage() 方法中的值被削减了，但在 UI 上我看到值没有改变。
Plunker

当我将事件从 input 更改为 keyup 时，它开始正常工作。第十位之后的所有字符都被删除。

那么，有人能解释一下为什么input 事件不会更新textarea 中的值吗？

【问题讨论】：

这样做有什么好处？？您可以直接使用maxlength="10" 属性，该属性不允许用户输入超过 10 个符号
我必须显示弹出消息“短信长度大于 250”。在示例中，我删除了该代码。
我觉得你应该试试（oninput）

标签： javascript angular

【解决方案1】：

你有几个选择：

1 - 使用文本区域的maxlength="10" 标签：

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

2 - 使用 reactive form control 和 built-in validator ：

3 - 控制输入：

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


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

【讨论】：

糟糕，忘记更改属性绑定！对不起。
1) 我不能使用maxlength="10"，因为我需要显示带有错误消息的弹出窗口。 2）我会读这篇文章。谢谢 3) (change) 不起作用。我在 Plunker 中更改了事件，但它仍然没有削减 smsMessage 的宽度。
然后使用keypress
另外，正如我在问题中所说，这个例子正在使用(keup)="changeSMSMessage()"。但我想了解为什么它不适用于(input) 事件。
keypress 不起作用，因为它在执行 changeSMSMessage() 后添加了按下的符号。最后我有 11 个符号而不是 10

【解决方案2】：

在你的组件初始化时使用 formControl 并订阅它的 valueChanges，这将允许你使用 rxjs 操作符来满足高级需求，比如执行 http 请求，应用去抖动直到用户写完一个句子，取最后一个值并省略前一个。

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);
      });
  }
}

【讨论】：