防止 Angular 2 在输入字段被编辑时应用更改答案

【问题标题】：Prevent Angular 2 from applying changes when input field gets edited防止 Angular 2 在输入字段被编辑时应用更改
【发布时间】：2017-02-03 05:39:36
【问题描述】：

我使用插值将变量绑定到输入字段（变量的值反映在输入字段中）。只要数据库中的相应值发生更改，该变量就会在后台自动更新。

如果用户当前正在编辑此字段，我想阻止 Angular 将变量的更改应用到输入字段。否则会覆盖用户的编辑。

（换句话说：我希望 Angular 在更新值之前检查输入字段当前是否被标记为 ng-pristine 而不是 ng-dirty。）

实现这一目标最简单的原因是什么？

想法： 难道不能实现一个等于 ngModel 的指令，但在应用值之前检查是否设置了类 ng-dirty？

最佳解决方案： 有一个指令，可以像 ngModel 那样进行双向数据绑定。如果未为视图设置“ng-dirty”标志，则该指令将模型内的更改应用于视图。如果视图失去焦点（如果触发了模糊事件），该指令会将视图内的更改应用于模型。

【问题讨论】：

标签： forms angular

【解决方案1】：

我可以看到这样做的一种方法是创建一个注入NgModel 的指令。您可以使用它来写入视图（在本例中为输入），并根据需要写入模型。您还可以检查模型是否原始且不脏。例如

import { Directive, OnInit, OnDestroy, Self } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
  selector: '[updateInput][ngModel]'
})
export class UpdateDirective implements OnInit, OnDestroy {
  private interval: any;

  constructor(@Self() private model: NgModel) {}

  ngOnInit() {
    let counter = 0;
    this.interval = setInterval(() => {
      console.log(`pristine: ${this.model.pristine}, dirty: ${this.model.dirty}`);
      if (this.model.pristine && !this.model.dirty) {
        counter += 2;
        this.model.valueAccessor.writeValue(`It's been ${counter} seconds...`);
        // the model will not be initially updated until the first editing by the user.
        // If you want the model updated when you write to the input, call the following.
        // Or comment it out if you don't want this behavior.
        this.model.viewToModelUpdate(`It's been ${counter} seconds...`);
      } else {
        clearInterval(this.interval);
      }
    }, 2000);
  }

  ngOnDestroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  }
}

这是Plunker。

注意：这个指令的选择器不是很好。这只是一个 POC。如果您想要一个更准确的选择器来处理所有用例，您可能需要查看用于DefaultControlValueAccessor的选择器

【讨论】：

这绝对是朝着正确的方向发展！不过，我看不到如何防止发生正常的数据绑定（如果组件中的变量“值”发生更改）。除此之外，我宁愿不必向数据库注册侦听器，而是仍然可以使用实际的数据绑定。
有机会我会调查的。我可能有一个想法。我没有考虑过从组件方面改变值的可能性:-(
我不太清楚你最后一句话的意思。你能再描述一下这个场景吗？
我在我的问题中添加了一个“最佳解决方案”部分，描述了我想要实现的目标。