Angular

Question

我在表单提交中使用了两个函数。如果这两个函数都成功，我需要显示一条成功的验证消息。目前，它不起作用。如果第二个函数失败，则显示成功消息。在显示验证消息之前如何检查它。

第一个函数

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

第二个函数

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

        },
        error => {     
        });
}

表单提交

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

}

检查表单提交功能。我只需要在两个函数都成功时显示我的验证消息。

Answer 1

你只能做一件事。按执行顺序调用函数。试试下面的代码。

第一个函数：

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

第二个功能：

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

表单提交：

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

}

Answer 2

假设您正在发送请求并等待响应 returned 并一起验证两个响应的状态，您可以查找 forkJoin.

需要registerUser和registerInfo两个方法修改为returnObservable.

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

Angular - 两个函数成功后显示的验证消息

Angular - Validation message display after success for two functions

typescript