如何避免在未定义与 null 时触发表单控件 valueChanges

Question

我正在使用 Angular 8 我有一个表单对象并且我已经通过以下方式订阅了值更改：

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

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

而且我还不得不说我在我的表单中将值更改放在控制器的孔上，所以订阅方法 returns 的 'prev' 和 'next' 的值总是对象也不仅仅是一层！

例如像这样：

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) {

 }
});

如何避免在未定义与 null 时触发表单控件 valueChanges

how to avoid to fire form control valueChanges when undefined vs null

null

undefined

lodash

angular-reactive-forms

angular8