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

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

如果用户当前正在编辑输入字段，我希望防止Angular将变量的更改应用于输入字段。否则，用户的编辑将被覆盖

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

最简单的方法是什么？为什么要做到这一点

创意： 是否可以实现一个等于ngModel的指令，但在应用该值之前检查是否设置了类ng dirty

最佳解决方案：

---

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

我可以看到这样做的一种方法是创建一个指令，该指令注入

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

这是一个例子

---

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

的选择器，这肯定是正确的方向！但是，我不知道如何防止正常的数据绑定发生（如果组件中的变量“value”发生更改）。除此之外，如果我不需要向数据库注册一个侦听器，但仍然可以使用实际的数据绑定，我会在有机会的时候进行研究。我可能有个主意。我没有从组件方面考虑价值变化的可能性：-（我不太清楚你的最后一句话是什么意思。你能再描述一下场景吗？我在问题中添加了“最佳解决方案”一节，描述了我想要实现的目标。