Validation message display after success two functions Angular-CodePudding

I am using two functions in my form submission. If all two function success, I need to show success validation message. currently its not working. If second function fail, success message display. How I check this before show 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 both success.

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);
    }
});

}