Question

我有textarea。我尝试将值的宽度限制为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中的值吗？

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

Answer 2

在组件初始化时使用formControl并订阅它的valueChanges，这将允许您使用rxjs运算符满足高级要求，例如执行http请求，应用反跳操作，直到用户写完一个句子，获取最后一个值，然后省略上一个。 / p>

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：输入事件

2 个答案: