I have been working on setting up a form submission process where a field within the form is connected to its own service in the application. My goal is to have the submit button trigger the service call for that specific field, wait for it to complete successfully, and then proceed with the regular form submission logic.
Below is a simplified version of what I have attempted so far:
async onSubmit(form) {
if(specialField) {
const response = await this.updateSpecialField();
}
// The rest of the form submission process is abstracted here
}
async updateSpecialField() {
this.specialService.updateField().subscribe(then => {
this.specialService.loadingFields$.subscribe(data => {
this.loading = data;
});
});
}
In this scenario, the service call is being made but it always completes after the form submission has already gone through. As this approach didn't yield the desired results, I experimented with using await and promises to ensure that the service call finishes before proceeding.
Here is an alternate version of the updateSpecialField function:
async updateSpecialField() {
let updatedFieldResponse = await this.specialService.updateField().toPromise();
return Promise.resolve(updatedFieldResponse);
}
In this case, the execution never reaches the return line and the form submission does not happen. Although the service returns a successful response, the code doesn't continue from where it should.