CODEWITHSUNDEEP
javascriptangularrxjsrxjs-observables
Piotr Deja
Piotr Deja

Reputation: 73

How to make Child Component Form wait before it submits its Form data for the Parent Component to have done submitting its own/separate Form?

How to make ChildComponent wait and collect the ID from newly submitted ParentComponent Form and only ^then^, after the ID has been collected, feed that ID to the Child Component Form and then submit Child Component Form ?

Child and Parent Components are communicating through @Output and BehaviorSubject.

  1. HTML Parent template -> https://pastecode.io/s/8zichk9g
  2. Typescript -> https://pastecode.io/s/nj3q21ug

This is the visual representation of Parent and Child Form Submition from my App: https://www.dropbox.com/scl/fi/ejahr2imrehoblrse6l5w/save-nested-tasks.mkv?dl=0&rlkey=0x8rv4ts924tj116p7rqxntt6

As it is now, ParentComponent and ChildComponent submit methods are performed simoutaneulsy, which is wrong, I need 'onTaskSubmit' method to wait for the 'onGoalSubmit' method to funish submitting:

onGoalSubmit(form: NgForm) {
    if (form.invalid) {
        return;
    }
    this.priorityValue = this.priority.nativeElement.querySelector('.active').innerText;
    this.newGoal = new Goal(
        form.value.name, 
        form.value.isMainGoal, 
        form.value.details, 
        form.value.select_category, 
        this.priorityValue, 
        form.value.creationDate, 
        form.value.endDate
    );
    this.newGoal$ = this.goalsS.postGoal(this.newGoal);
    this.newGoal$.subscribe((response: any) => {});
    // ...other stuff here like removing modal 
    // and component refreshing
}

onTaskSubmit(form: NgForm) {
    this.newTask = new Task(
        this.newGoalId, // This is the place where I need to paste my new Goal ID
        form.value.name, 
        form.value.description, 
        form.value.priority, 
        form.value.taskDate
    );
    this.tasksS.postTask(this.newTask);
}

Do I need the Async Pipe somewhere - but where and how ?

Upvotes: 0

Views: 39

Answers (1)

Reza
Reza

Reputation: 410

As you have your newGoal value inside the newGoal$ BehaviorSubject what you can do is to store the data you get from your onTaskSubmit function in another Subject and then use forkJoin or combineLatest rxjs operators to combine these two.

Another combine option is to use flatMap and get the data you want from the newGoal$ Subject.

Upvotes: 0

Related Questions