stepper.js | jQuery library that adds external controls | Plugin library

Please help as I am having error after upgrade my global @angular/cli to version 11. I have revert back to version 8. But now this error keep appear when I try to compile. I suspect is the version compatibility or mat-angular issue. I have already try to delete the node modules and reinstall using npm install. I have also try to use npm cache clean but still no result. I have follow the advice from this post. But the error still happen. Please advice.

I am trying to create multistep form using formik but i am not able to set form value when on click serach button. when i click search button then i am set the data and i want to auto field make and model field how can i do ????

here is my stepper.js page--

I'm trying to make 2 components in sync with their parent component state using React hooks. I'm using horizontal and vertical stepper as 2 separate components from material UI, and their parent class has the content of the stepper and the state in which they both should share. The reason I'm using the horizontal and vertical stepper is to make the UI responsive as possible.

The problem I'm encountering is that when the activeStep is incremented by one of the components i.e. horizontal stepper, upon my understanding of the component mount life cycle. the render method is called and the Activestep is incremented and reflected in the dom. but it is only reflected in the horizontal stepper. the change only propagates in the horizontal stepper component. when navigating the vertical stepper component, it returns the initial state of the hook which was originally set to 0.

I'm trying to make Horizontal and Vertical stepper in sync with the activeStep in the stepperContent, and any change in the state should propagate in both components.

My Question is

How do I make them in sync with the activeState in stepperContent stateful functional component?

steppertContent.JSX

I am trying to create a vertical stepper for form submission. There is an issue in Stepper.jsx inside of useEffect it setStepsState(stepState);. The programs continuous run

when i remove dependency list from useEffect it runs properly but it does not pass the update value.

Here is codesandbox link codesanbok

I use stepper.js (https://github.com/gijsroge/stepper.js) to customize the 'input type = "number"' in the price calculator and encountered a problem when writing javascript code.

There are several 'input type = "number"' with the date attribute 'data-value' and the total value of the stepper is made up of the product 'input type = "number"' and 'data-value'.

It is necessary when increasing the value (clicking on "+") of one of the steppers, add it to the total amount of 3 steppers, and decreasing (pressing on "-"), on the contrary, reduce the total amount.

My code separately displays the value of each stepper, but I did not succeed in correctly displaying the total value when adding and subtracting.

I am new to javascript. Can you help me write the code correctly so that it is calculated correctly?

I made a steppers sample project with react.js and material UI. Link is https://stackblitz.com/edit/dynamic-stepper-react-l2m3mi?file=DynamicStepper.js

I am trying to make the same sample with Angular and material, But I was not able to achieve the same functionality as react. can anyone help me with this?

Angular work link:- https://stackblitz.com/edit/stepper-dynamic-gpwp1x?file=src%2Fapp%2Fapp.component.html

What I want to achieve in this sample:-

• Stepper headers:- In react sample I'm enabling only the current header and on select, I am enabling add the item button.
• Icons, I was not able to remove the edit icons.

Thanks for the help.

Created a simple Input and tried to set Max value using Jquery. Initially it sets the value to 77 and then decreases the max value to 50.

The below example works !

update 2:

hi,

• sorry I forgot to mention about the api call in my question earlier
• I making an api call in redux way.
• so in my actions/index.js file I am calling my api in getSports method.
• but the problem is when I try to retrieve the values I am getting an error. A cross-origin error was thrown. React doesn't have access to the actual error object in development. See b.me/react-crossorigin-error for more information.
• so I debugged the props in the class AsyncValidationForm console.log("AsyncValidationForm this.props---->", this.props);
• there I dont see the getSports method.
• can You tell me how to retrieve the values so that I can assign the them to my radio button label.

https://codesandbox.io/s/yv1zpj874x

actions/index.js

I've been writing a prototype in React with Material UI the past two weeks and I'm really enjoying it!

Until now I've always put all my components in my main class to get the hang out of and didn't think much of component communication.

My problem is that I don't know how to tell a component that I imported, to enable/disabled one if its buttons.

In my case, I import a Stepper in my main class and want to disable the "NEXT" button if a series of state values in the main class have not been set yet.

So, first of all, I have to choose my dispenser, then the next button gets enabled and disabled again until I choose my fuel type, then again disable the "NEXT" button until the amount has been chosen and then just finish the fueling.

The Stepper is just the demo you can find on the Material ui website.

My state in the main class looks like this: