javascript - Angular 2 - 从输入中删除字符

Question

是否有办法在 Angular 2 中使用 ngModel 检测文本中删除的字符？

我想要这样的东西:

原文:@Hello World !

修改后的文本:Hello World!

Console.log

Removed character: '@'

我在下面找到了 Arie Xiao 编写的关于 Javascript 和 Jquery 的一个很酷的示例:

https://stackoverflow.com/a/17005983/5668956

但是我想知道是否可以使用 Jquery 之外的其他东西，因为我发现 Jquery 在 Angular 2 中很难实现

Answer 1

我建议使用表单 Controller 来处理输入字段上的更改。该片段显示从输入字段添加或删除的字符。看看我的 Plunker查看代码的运行情况。

@Component({
  selector: 'app-root',
  template: `
    <input type="text" [formControl]="form"  class="form-control" >
    <h3 *ngIf="initial">
      Text <span [style.color]="textadd ? 'green' : 'red'" > {{textadd ? "add" : "removed" }} </span>: {{change}}
    </h3>
  `,
})
export class App {
  form;
  textadd;
  text = "@Hello World!";
  initial = false;
  change;
  ngOnInit() {
    this.form = new FormControl({ value: this.text, disabled: false });

    this.form.valueChanges.subscribe(val => {
      let change;
      if (val.length > this.text.length) {
        change = val;
        for (let variable of this.text) {
          change = change.replace(variable, '');
          this.textadd = true;
        }
      } else {
        change = this.text;
        for (let variable of val) {
          change = change.replace(variable, '');
          this.textadd = false;
        }
      }
      this.change = change;
      this.text = val;
      this.initial = true;
    });
  }
}