Angular - Validation message display after success for two functions-CodePudding

I am using two functions in my form submission. If all two functions succeed, I need to show a successful validation message. Currently, it's not working. If the second function fails, the success message is displayed. How do I check this before showing the validation message.

First Function

registerUser(user: cusInfo) {
    let userinfo = { cusInfo: { ...user } }
    this.registrationService.saveUserInfo(userinfo).subscribe(data => {
        },
        error => {
        });
}

Second function

registerInfo({ code,name }) {
    let item = { "reserve": { code,name} };
    console.log(item);
    this.registrationService.infoRequest(item).subscribe(data => {

        },
        error => {     
        });
}

Form submit

registerCustomer(item, info, reservelockerform: NgForm) {
    this.alertService.clear();
    this.registrationService.checkDuplicateUser(info.userName).subscribe(data => {
        if (data.executionDescription == 'Success') {
            this.registerUser(info);
            this.registerInfo(item);
            this.alertService.success('Registration has been made successfully');
        } else {
            this.alertService.error(data.executionDescription);
        }
    });

}

Check form submit function. I need to show my validation message only for both functions are succeeded.

CodePudding user response：

Assume that you are sending requests and waiting for the responses returned and validating both responses' status together, you may look for forkJoin.

Both registerUser and registerInfo methods are needed to modify to return Observable.

registerUser(user: any) {
  let userinfo = { cusInfo: { ...user } };
  return this.registrationService.saveUserInfo(userinfo);
}

registerInfo({ code, name }) {
  let item = { reserve: { code, name } };
  console.log(item);
  return this.registrationService.infoRequest(item);
}

registerCustomer(item, info, reservelockerform: NgForm) {
  this.alertService.clear();
  this.registrationService
    .checkDuplicateUser(info.userName)
    .subscribe((data) => {
      if (data.executionDescription == 'Success') {
        forkJoin([this.registerUser(info), this.registerInfo(item)])
          .subscribe({
            next: (data: any) => {
              if (
                data &&
                data[0] &&
                data[0].status == 'success' &&
                data[1] &&
                data[1].status == 'success'
              )
                this.alertService.success(
                  'Registration has been made successfully'
                );
              else this.alertService.error('Registration is failed');
            },
            error: (err) => {
              console.log(err);
              this.alertService.error('Registration is failed');
            },
          });
      } else {
        this.alertService.error(data.executionDescription);
      }
    });
}

Sample StackBlitz Demo

CodePudding user response：

You can do one thing. Call the functions in order of execution. Try code below.

First Function :

registerUser(user: cusInfo, item) {
let userinfo = { cusInfo: { ...user } }
this.registrationService.saveUserInfo(userinfo).subscribe(data => {
    this.registerInfo(item);
  }, error => { });
}

second function :

registerInfo({ code,name }) {
let item = { "reserve": { code,name} };
this.registrationService.infoRequest(item).subscribe(data => {
   this.alertService.success('Registration has been made successfully');
  }, error => {  });
}

Form submit :

registerCustomer(item, info, reservelockerform: NgForm) {
this.alertService.clear();
this.registrationService.checkDuplicateUser(info.userName).subscribe(data => {
    if (data.executionDescription == 'Success') {
        this.registerUser(info, item);
    } else {
        this.alertService.error(data.executionDescription);
    }
});

}