Question

无论如何使用Angular 2中的ngModel检测文本中删除的字符？

我想要类似的东西：

原始文字：@Hello World !

修改后的文字：Hello World !

CONSOLE.LOG

Removed character: '@'

我在Javascript上找到了一个很酷的例子，下面是 Arie Xiao ：

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

但是我想知道我是否可以在Jquery旁边使用另一个东西，因为我发现Jquery在Angular 2中很难实现

Answer 1

我建议使用一个Forms控件来对输入字段进行更改。该片段显示从输入字段添加或删除的字符。查看我的 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;
    });
  }
}

Angular 2 - 从输入中删除字符

1 个答案: