基于表达的角结合形式结合形式

Question

我的请求数据中有2个数组。一种包含包括产品，另一个包含产品。您不能同时使用这两者。因此，我有这样的html：

<input [formControl]="this.exclude$ ? excludedFormControl : includedFormControl>
<mat-slide-toggle (change)="excludeChange($event.checked)"></mat-slide-toggle>

这是我的TS：

exclude$ = new BehaviorSubject<boolean>(false);

currentFilter = {
    productsSection: {
        includedIds: [],
        excludedIds: [],
    },
};

includedFormControl: FormControl = new FormControl(
    this.currentFilter.productsSection.includedIds ? this.currentFilter.productsSection.includedIds : [],
);

excludedFormControl : FormControl = new FormControl(
    this.currentFilter.productsSection.excludedIds? this.currentFilter.productsSection.excludedIds: [],
);

excludeChange(value: boolean): void {
    this.filterForm.patchValue({
        includedIds: [],
        excludedIds: [],
     });
     this.exclude$.next(value);
}

showFormValue() {
    console.log(this.filterForm.value);
}

问题：当我滑动切换时，dubludechange被调用，但是输入仍然将数据写入纳入incruffeids中，忽略了滑块。

Answer 1

我认为您必须从排除$订阅。

<input [formControl]="excluded ? excludedFormControl : includedFormControl">

在component.ts文件中，您必须定义排除。

excluded = false;
this.exclude$.subscribe(res => {
  this.excluded = res;
});