Prevent users from pressing the "next" button until all input fields have been updated

Question

Prevent users from pressing the "next" button until all input fields have been updated

With over 30 inputs on a single page, each input triggers a callback on ng-blur (when focus is lost) that calls a remote API using the $http AngularJS service. These API requests run asynchronously in parallel, allowing users to edit inputs multiple times with each ng-blur event sending data to the server.

At the bottom of the page, there is a "next" button that users press when they are finished editing the inputs. How can we prevent users from pressing the "next" button until all API PUT promises have been completed? Additionally, what should be done if some HTTP requests fail due to a server error (e.g., 500 status code)?

javascript angularjs asynchronous promise synchronization

Answer 1

Answer №1

To enable a button based on a flag in the component:

In your view, add the following code:

<button type="submit" [disabled]="!finished">Add</button>

Within your component, set the initial value of the flag:

public finished = false;

Within a Promise:

   let promise1 = Promise.resolve(3);
   let promise2 = 42;
   let promise3 = new Promise(function(resolve, reject) {
      setTimeout(resolve, 100, 'foo');
    });

Promise.all([promise1,promise2,...]).then((...)=> {
  finished = true; // enabling the button
})

For more information, check here

Alternatively, you can use separate flags for each Promise:

public promiseF1 = false;
public promiseF2 = false;
public promiseF3 = false;
etc...

Set each flag to false at the beginning and update it to true upon completion of the respective call.

Then, in your HTML:

<button type="submit"[disabled]="!promiseF1 && !promiseF2 && !promiseF3 && etc...">
 Add
</button>

Answer 2

To enable a button based on a flag in the component:

In your view, add the following code:

<button type="submit" [disabled]="!finished">Add</button>

Within your component, set the initial value of the flag:

public finished = false;

Within a Promise:

   let promise1 = Promise.resolve(3);
   let promise2 = 42;
   let promise3 = new Promise(function(resolve, reject) {
      setTimeout(resolve, 100, 'foo');
    });

Promise.all([promise1,promise2,...]).then((...)=> {
  finished = true; // enabling the button
})

For more information, check here

Alternatively, you can use separate flags for each Promise:

public promiseF1 = false;
public promiseF2 = false;
public promiseF3 = false;
etc...

Set each flag to false at the beginning and update it to true upon completion of the respective call.

Then, in your HTML:

<button type="submit"[disabled]="!promiseF1 && !promiseF2 && !promiseF3 && etc...">
 Add
</button>

Answer 3

Answer №2

Ensure that all input fields have the "required" parameter filled in to guarantee that responses from multiple promises are complete before activating the submit button.

Validate the form upon clicking the submit button.

<form  #form="ngForm">
    //Include required parameters in your input fields

  <button type="submit" [disabled]="form.invalid">Next</button>

</form>

Answer 4

Ensure that all input fields have the "required" parameter filled in to guarantee that responses from multiple promises are complete before activating the submit button.

Validate the form upon clicking the submit button.

<form  #form="ngForm">
    //Include required parameters in your input fields

  <button type="submit" [disabled]="form.invalid">Next</button>

</form>

Answer 5

Answer №3

To address this issue, I devised a solution inspired by semaphores. Starting with the semaphore counter at zero, I increment it whenever a promise is initialized and decrement it upon resolution or rejection (using .finally()). When the counter reaches zero, the "next" button becomes accessible to the user.

Answer 6

To address this issue, I devised a solution inspired by semaphores. Starting with the semaphore counter at zero, I increment it whenever a promise is initialized and decrement it upon resolution or rejection (using .finally()). When the counter reaches zero, the "next" button becomes accessible to the user.

Prevent users from pressing the "next" button until all input fields have been updated

Answer №1

Answer №2

Answer №3

Similar questions

Array.from does not create a deep copy

Guidelines for utilizing basepath for specific pages in NextJS

Tips on viewing class object values within the `useEffect` hook

Steps for adding a thought bubble over an image using CSS

Creating multiple AJAX contact forms can be achieved by modifying the code to accommodate multiple forms on a single page. Here's

Firing a custom jQuery event when a page loaded via AJAX is complete, ensuring it is triggered

Exploring the method of retrieving nested JSON objects in Angular

Is there a way for CasperJS to access the underlying PhantomJS objects and references?

Updating elements in an array based on a specified threshold value, all done without the use of conditional if statements in Javascript

Collapse the Bootstrap Menu upon selecting a Link

issue involving extension that interrupts downloads

What is the best way to remove an item from a mongoose schema and then update the document or schema?

Passing along a request using Node.js

The start screen fails to display when clicking the restart button

How can you protect against XSS when using React server-side rendering and window.initialState?

Retrieving the text of a selected option by its value

The context of the Nuxt.js3 plugin loses its definition

Packing third-party npm modules with Webpack for seamless integration

The React functional component fails to update when triggered by a parent component's setState method

Utilizing Django's built-in widgets for localization