如何避免在 undefined vs null 时触发表单控件 valueChanges

Question

我正在使用 Angular 8 并且我有一个表单对象，并且我通过以下方式订阅了 valuechanges：

this.myFormSubscription = this.myForm.get(this.parentGroupName).valueChanges 。管道（ startWith(null 作为字符串), 成对（）， 去抖时间（100）， distinctUntilChanged((a, b) => lodash.isEqual(a, b)) ) .subscribe(([prev, next]: [any, any]) => { //...做一点事 });

问题是它在前一个值为 null 且下一个值未定义时触发，对我来说，这种比较的结果应该是真的，我不需要跟踪这些变化。

而且我还不得不说，我将 valuechanges 放在了我的表单中的控制器的孔上，所以订阅方法返回的 'prev' 和 'next' 的值总是 objects 不仅仅是也有一层！

例如这样：

prev = {a: 1, b: 2, c: {d: 3, e: null} };
next = {a: 1, b: 2, c: {d: 3, e: undefined} };

在这种情况下，valuechanges 事件触发了我真的需要阻止它，有什么办法吗？

或者也许我必须手动比较前一个值和下一个值，对吗？会是一个好的解决方案吗？虽然这看起来很困难和棘手，因为对象是两级的...... 那我真的应该怎么做？！

其实我是新来的，所以任何帮助都将不胜感激。

Answer 1

尽量保持简单并随用随添加。最基本的形式是这样工作的：

this.myFormSubscription = this.myForm.get(this.parentGroupName).valueChanges
            .subscribe((value) => {
                if (value) { <= If value is null or undefined, it will not continue.
                //...do something
               }
            });

更新：

如果您的FormGroup 看起来像这样（其中 c 是 myForm 的子组）

this.myForm = this.fb.group({
 a: [null],
 b: [null],
 c: this.fb.group({
   d: [null],
   e: [null],
 })
});

如果需要获取e的valueChanges。应该是这样的

const cGroup = this.myForm.get('c') as FormGroup;
cGroup.get('e').valueChanges.subscribe(value => {
 // Now you only have the value and changes of e in the formgroup of c
 if (value) {

 }
});