Reactive Form Submit invoke asynchronously and on new value from observable, proceed further

问题

I have this reactive form onSubmit method invoked on ngOnSubmit, which is called syncronously. I have some valueChanges events implemented asynchronously as shown below:

I get the selectedcount based on selected ids need to display as the user selects
The select checkboxlist is inside an accordion, so on closing of the accordion, I emit an observable collapsed$
this.value1$ emits on closing accordion. so other dropdowns can be filtered based on this value once the sample(collapsed$) is received.

This works fine.

However, if I submit the form without closing the accordion, then the other dropdown selections values are not refreshed.

this.value1$ = this.value1.valueChanges
    .pipe(
        switchMap((val) => {
            return this.getSelectedIds$(val, name, ); //retrieves ids from data array
        }),
        sample(this.collapsed$)
    );

I saw an example using the async validators on form submit, using formSubmitSubject$. I want to do something similar, but it does not work correctly. I use an isFiltered$ observable to emit inside tap of valueChanges.

Any solution is fine, async or sync submit of form.

Below is my code and I don't have the time to put together a StackBlitz. Can someone pls point out what is the correct way to do this? Help is greatly appreciated!

Thanks a lot in advance.

this.value1$.subscribe(val => {
    this.updateFormArray(...) // this is async method returns promise
        .then(y => this.isFiltered$ = of('READY')) //this does not consistently fires

//then doing submit as shown below
formSubmitSubject: Subject<boolean> = new Subject();

this.formSubmitSubject
    .pipe(
        tap(() => this.collapsed.next(2)), //invoking the accordion collapse
        switchMap(() =>
            this.isFiltered$.pipe(
                startWith('PROGRESS'),
                filter(status => status !== 'READY')
            )
        ),
        filter(status => status === 'READY')
    )
    .subscribe(val => this.processSubmit());

来源：https://stackoverflow.com/questions/62772896/reactive-form-submit-invoke-asynchronously-and-on-new-value-from-observable-pro

标签

angularjs

rxjs

form-submit