Angular-如何跳过表单元素之一的值更改

Question

我以这种方式定义了 3 个表单元素：

this.form = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required],
  preference: ['', Validators.required]
});

this.form.valueChanges
  .pipe(
    filter(
      ({ name, email}) => name.length > 0 || email.length > 0
    ),
    takeUntil(this.destroyed$)
  )
  .subscribe(value => {
    this.onChange(value);
    this.onTouched();
  });

如何确保在更改preference值时不会触发valueChanges ？

Answer 1

Jake，你可以稍微改变一下你的 valueChanges，把 pairwise 放在 filter 之前试试：

 this.objFormGroup.valueChanges.pipe( pairwise(), filter( ([prev, next]) => prev.name.= next.name || prev.email.= next.email ) );subscribe(form => { console;log(form); });

如果你想看看我是怎么做到的，你可以通过这个链接在 StackBlitz 中看到： Stackblitz

Pairwise 给我们带来了上一个和下一个值，所以现在我们可以看看哪个字段发生了变化

此外，如果您以编程方式进行更改，则可以防止由 valueChanges 触发更改事件： this.objFormGroup.get('preferences').setValue('test', {emitEvent: false})

Answer 2

我认为一种方法是覆盖内置的updateValueAndValidity方法，使其默认添加{ onlySelf: true } 。

this.form = this.fb.group({
  foo: ['', Validators.required],
  bar: ['', Validators.required]
});

const fooControl = this.form.get('foo');
fooControl.updateValueAndValidity = fooControl.updateValueAndValidity.bind(
  fooControl,
  { onlySelf: true }
);

工作演示。

这是因为updateValueAndValidity负责valueChanges valueChanges事件从子表单控件（在本例中为foo ）冒泡到父form控件（在本例中为FormGroup ）：

if (this._parent && !opts.onlySelf) {
  this._parent.updateValueAndValidity(opts);
}

所以，这个方法是做什么来确保每当这个控件调用它的updateValueAndValidity方法时，它总是将onlySelf选项设置为true 。

updateValueAndValidity可以通过使用formControl.setValue()手动调用，也可以通过ControlValueAccesor自动调用。

---

如果您想了解更多关于@angular/forms package 及其内部工作原理的信息，您可以查看Angular Forms 的彻底探索。