在 Angular 6 中，如何檢查 formControl 值是否在每次聚焦時發生了變化？

Question

我在子組件中有一個@Input變量 - 度量單位為英寸。 我的表單有 2 個輸入文本控件 - 1.英尺2.英寸我將 @Input 轉換為英尺和英寸。 僅當表單中的值發生更改時，在focusOut上，它才應將值發送給父級。

真正的問題是，我的焦點每次都會發出，而沒有檢查值是否發生了變化。

情況是，

1. 我有一個初始值作為@Input
2. 在更改時，我正在做一些計算並傳播它。
3. 一旦我輸入了價值焦點 - 到目前為止，代碼運行良好。
4. 再次聚焦然后聚焦而不改變它。
5. 第二次我必須檢查我是否編輯了以前的值。 因為隨着發射，出現問題並且值發生變化。

Answer 1

我們可以使用NgOnChanges來比較@Input prop 以前的值和當前值。 如果當前值與先前值不同，我們會做一些事情。

export class AppComponent implements OnChanges {

  @Input() textValue;

  ngOnChanges(changes: SimpleChanges) {
    const text: SimpleChange = changes.textValue;

    if (text.currentValue !== undefined && text.previousValue !== undefined) {
      console.log('prev value: ', text.previousValue);
      console.log('current value: ', text.currentValue);
      if (text.previousValue !== text.currentValue) {
        console.log('new different value!');
        // do something here with text.currentValue
      }
    }
  }

}

或者使用Hostlistener監聽focusout事件以捕獲事件發出的值。 將事件值表單輸入與子組件值中的先前值進行比較。

@HostListener('focusout', ["$event.target.value"])

  onFocusOut(inputValue) {

    console.log('input value on focus out', inputValue);

    if (this.textValue !== inputValue) {
    console.log('new different value!');
        // do something here with inputValue
    }

  }

我更喜歡ngOnChanges方法。 它使閱讀更清晰，避免了一些額外的偵聽器，我們可以將SimpleChanges obj 用於其他輸入。 但是，使用OnChanges更改檢測僅在道具更改時運行。 如果出於某種原因您總是想使用focusOut運行這些檢查（無論輸入更改如何），那么Hostlistener將是我的示例的方法。