在 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将是我的示例的方法。