防止Angular 2在輸入字段被編輯時應用更改

Question

我使用插值將變量綁定到輸入字段（變量值反映在輸入字段中）。只要數據庫中的相應值發生更改，該變量就會在後臺自動更新。

我想阻止Angular將變量的變化應用到輸入字段，如果用戶正在編輯此字段。否則，用戶的編輯將被覆蓋。

（換句話說：我想那個角檢查輸入字段目前正與標記NG-原始和不NG-弄髒它更新前值。）

什麼是最簡單的，爲什麼要實現這一目標？

理念： 它不應該是可能實現的指令，如果NG類髒的應用價值之前設置等於ngModel但檢查？

最佳解決方案： 有一個指令，它執行像ngModel這樣的雙向數據綁定。如果未爲視圖設置「ng-dirty」標誌，則該指令將模型內的更改應用於視圖。如果視圖失去焦點（如果模糊事件被觸發），則該指令將視圖內的更改應用於模型。

Answer 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的一個