Angular 2 - 从输入中删除字符答案

【问题标题】：Angular 2 - Get removed character from inputAngular 2 - 从输入中删除字符
【发布时间】：2017-05-11 13:34:27
【问题描述】：

无论如何，在 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 中很难实现

【问题讨论】：

创建2个变量，1个用于ngModel，另一个用于处理差异。在input中，您使用(change)在component中执行方法并操纵差异.
你不能只保留以前的值并比较发生变化时的变化吗？
你可以监听 onChanges 事件

标签： javascript angular typescript

【解决方案1】：

我建议使用表单控制器来处理输入字段的更改。 sn-p 显示从输入字段中添加或删除的字符。查看我的 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;
    });
  }
}

【讨论】：