typescript 检测FormArray子级的更改

qltillow  于 2023-08-07  发布在  TypeScript
关注(0)|答案(2)|浏览(114)

我有一个FormArray,里面有不同的FormControl项目。我希望能够听到其中任何一个的更改事件。
我试着这样做:

this.form = this.fb.group({
    items: this.fb.array([this.fb.control('')])
});

(<FormArray>this.form.get('items')).controls.forEach((control: FormControl) => {
    control.valueChanges.subscribe(change => console.log(change));
});

字符串
但我似乎从来没有到达console.log,即使我确信子控件正在触发一个更改事件(从ControlValueAccessor接口)。
如何订阅FormArray的子控件更改

svujldwt

svujldwt1#

this.form.get('items').valueChanges.subscribe(changes=> {
     console.log(changes)
 })

字符串

fnvucqvd

fnvucqvd2#

为任何可能在Google上找到此问题的人添加此内容。
FormArray的主要问题是它的子节点是动态的,它们可以被添加和删除,所以在检测它们的变化之前,我们需要检测FormArray本身的变化,但只有当新的子节点被添加或删除时,我们才可以这样做:

let length = 0;
let childrenChangesObservable = control.valueChanges.pipe(
    filter(() => control.length != length),
    switchMap(() => {
        length = control.length;
        // Here we can detect changes on the new children
    })
);

字符串
现在,要处理子控件上的更改,这里的技巧是忽略外部可观察对象childrenChangesObservable,将其用作订阅,并在其中使用tap等操作符,并使用combineLatest检查所有子控件:

// Log each time a child control named "id" changes values
let length = 0;
let childrenChangesObservable = control.valueChanges.pipe(
    filter(() => control.length != length),
    switchMap(() => {
        length = control.length;
        return combineLatest(control.controls.map(c => c.controls.id.valueChanges.pipe(
            tap(v => console.log("New value", v))
        )));
    })
);
// We don't care about what comes out of here and when,
// this just handles the subscriptions to the inner observables
childrenChangesObservable.subscribe();


这样,每个内部可观察对象中的操作符在需要时执行,而外部可观察对象只有在所有操作符至少发出一次时才会发出,但我们不关心这些,因为我们正在内部执行我们的操作

相关问题