当只有一个 formControl 与之交互时，为什么会同时触发所有 valueChanges？

Question

我有 2 个表单字段，它们是日期选择器，一个简单的 "to" 和 "from" 表单。

问题在于，无论用户与哪个日期选择器进行交互，下面代码中的 valueChanges 都会为两个表单控件触发。 "other" 未与之交互的表单控件始终为空。

因此无论您选择哪个日期，函数 addDateFilterToRoute(changes) 都会被触发两次。我不明白为什么。

HTML

<div class="datepicker-container">
  <div class="form-group">

    <form-input-datepicker-dropdown
      [group]="form"
      controlName="deliveryFrom"
    ></form-input-datepicker-dropdown>

  </div>
  <div class="form-group">

    <form-input-datepicker-dropdown
      [group]="form"
      controlName="deliveryTo"
    ></form-input-datepicker-dropdown>

  </div>
</div>

组件 TS

  ngOnInit(): void {
    this.buildForm();
    this.handleFormChanges();
  }


  buildForm(): void {
    this.form = this.fb.group({
      deliveryFrom: '',
      deliveryTo: ''
    });
  }


  handleFormChanges(): void {
    this.form
      .get('deliveryFrom')
      .valueChanges.pipe(takeUntil(this.unsubscribe$))
      .subscribe(changes => this.addDateFilterToRoute(changes, 'deliveryFrom', true));

    this.form
      .get('deliveryTo')
      .valueChanges.pipe(takeUntil(this.unsubscribe$))
      .subscribe(changes => this.addDateFilterToRoute(changes, 'deliveryTo', false));
  }

所以当我改变 deliveryFrom 它调用 this.addDateFilterToRoute(changes, 'deliveryTo', false)

Answer 1

您通过创建一个内部有两个控件的表单组，在创建反应式表单时搞砸了一点，但是您已经将这两个控件作为一个组放入视图中的每个数据选择器中。您所需要的只是将组移出日期选择器。这不应生成对每个控件的额外调用：

<div [formGroup]="form" class="datepicker-container">
  <div class="form-group">
    <form-input-datepicker-dropdown
      [formControlName]="deliveryFrom"
    ></form-input-datepicker-dropdown>
  </div>
  <div class="form-group">
    <form-input-datepicker-dropdown
      [formControlName]="deliveryTo"
    ></form-input-datepicker-dropdown>
  </div>
</div>

当只有一个 formControl 与之交互时，为什么会同时触发所有 valueChanges？

Why is all valueChanges triggered simultaneously, when only one formControl is interacted with?

angular

rxjs

angular-forms