Material UI - Multi Stepper Form + React Hook Form हिंदी में
Вставка
- Опубліковано 26 сер 2024
- #materialui #reacthookform #reacthookformhindi
to kaise hai applog frandsssssssssssss asha karta hu app sabhi bhout achhe honge mai subroto biswas aaj ke is video me apko batwunga ki kaise app material ui ke multi step form me bhout hi easily react hook form ko use kar sakte hai wo bhi bs thode se hi setup ke sath
Starter Code Download link 👇
github.com/too...
Final Code Download link 👇
github.com/too...
Social Media 👇
🐦Twitter / toofani_coder
📸 Instagram / toofani_coder
This is what i have to use and spoiled my code whole day 🤦 now got a solution ... + Happy to see a guy from Ranchi ,,... i belong from Jamshedpur , Jharkhand
Thanks!!! This sample worked really great, where others failed!
Thanks for this wonderful tutorial
Loved the video great work and very educating. However, I was wondering if you could add validation with something like formik and yup. I am new to coding and would love such great content. Keep it up.
sure I will do 😁✌️
Thanks for the video, I was looking for this type of video ❤❤
Toofan express suna tha....Abhi toofani coder 😅😅
Shatabdi Express 😅
Sab udaa denge
@@Ravi_Goyal 😂👍
Thank you bro...u got great talent
Bro. I always enjoying your tutorial though I don't understand Hindi, Please make more videos on RHF with MUI, with making re-usable sub components of DatePicker and so, Thanks a lot
thank you so much 💜, sure I will create many videos of React Hook Form latest version 7
nice tutorial bhai , keep it up 👌
data was keep inside inputs during back & fourth due to react-hook-form state management mechanism, this component was render only once... in case of multiple components for stepper there is chances of input data loss, in case of same component it will keep save during move between stepper steps...
Thanks bro i was looking this type video
Welcome 👍
Nice video 👍👍👍👍
Thanks you bhai bohot help hua
Thank you , very informative video. I want to know how to get the onchange in every input field from Controller and pass it to the main component? Thanks in advance.
No entendi ni una palabra, pero esto era justo lo que necesitaba
thank you toofani bhai
Perfeito! Me ajudou bastante!!!
Thanks for ur video
thanks its very helpful
Question: how will get the value of one of your inputs and displays into next form?
example: after you enter data all the inputs then the "thank you" page prints all the data?
Okk If you want to get some previous steps data on any next steps
you can simply acces through form context just like how you access redux state from any components this also works same way, you can check official documentation for this
Zabardast
how can we make a tab clickable so if we want to go to some specific step we just click on the circle and go on it
from bangladesh bhai
Sorry I see de code, tanks so much
Hello, I have recently completed my MCA. I would be very grateful if you could refer me for a ReactJS developer or MERN stack developer position in your company. Thank you.
hello Fraaaaaaaaaands Chill karo
Bhai plz re upload tht react redux toolkit video, bro thts wat we need 😭,, usmei kuch issue tha but plz bhai upload redux toolkit video once again 🙏..
Ha bhai kal hi kr dunga...💖
@@toofanicoder thik hei bhai, be safe
@@toofanicoder is any video of redux toolkit on your channel??
How we can customize with the color coding of the steps??
How are we going to do form validation? If someone misses a required field or entered an invalid value, they should not be able to click next. As soon as they click next, helper text should appear beneath empty required fields or fields with invalid values. Have you also implemented that?
ha bhai aise hi to implement kiya hai
it should be like this :
your stepper filee
const methods = useForm({
defaultValues: {
first_name: "",
last_name: "",
middle_name: "",
},
resolver: yupResolver(testSchema2[activeStep]),
});
/* Schemafile.js */
import * as yup from "yup";
export const testSchema2 = [
yup.object().shape({
first_name: yup.string().required(),
}),
yup.object().shape({
last_name: yup.string().required(),
}),
yup.object().shape({
middle_name: yup.string().required(),
}),
];
Hi Dost, I have a question, Jo value hum each page me input kar rahe hai usse ek summary page me show karna hai UI pe, usko kaise kar sakte hai?
save them inside store like Redux, ContextAPI, on summary page access from store and display.
Excellent!
If I have an input of type="file", how can I provide the value to useForm?
Congratulations!
bro this is little complicated to do, but you can do same as other input style
How to use Min or Max limit in text field?
const control = useFormContext(); says cannot destructure controll because its null
const {control} = useFormContext(); ✅️
const control = useFormContext(); ❌️
Sir please show how to post data using JSON server please
How persist data when user click on browser back button or any button on the page
use redux or context api,
when user click on next or previous button dispatch an action for persist data before increment or decrement of counter happening
simple ✌️
Is form mein input data "package.json" mein nahi jayega kya validation ki vajah se
Kyunki package.json mein data jata rehta hai jaise jaise hum form mein entries krte hain.
Please answer...🙏
Package.json me kaise jayega data??
@@toofanicoder Bhaiya matlab jaise hum agar react mein ek form banate hai and us form mein hum validation lagate hain aur jab hum data input krte Hain form mein toh voh hum kaha dekh payenge jaise ek object banakar hum usmein data store karenge ya aur kisi file mein data entries mil jati hai. AAP bata sakte ho ki validation krne ke baad hum jab data input karenge then submit karenge uske baad vo form reset ho jayega bt Jo humne data input Kiya tha toh hum vo wala data kaha dekh sakte hain VS code mein. Aap video mein console mein dikha rahe ho but agar multiple entries Hui toh kaha dekhenge.
Please answer
Actually bhaiya I am new to all this toh mujhe itna idea nhi hai.
Bhaiya I am extremely sorry, but main kehna chahta tha ki jaise hum ek file bana le jiska naam hai db.json and saari entries usi mein jaa rahi hai jaise hum "json-server --watch db.json --port 8000" ye wali command use krke chalate the aur sara form ka data db.json file mein chala jata tha vaise keh raha hu main.
@@robertmark5234 are koi baat nhi bhai naye ho ya purane ho, but tumhara question thoda ajeeb tha isiliye aise bola don’t take this seriously, ha toh jo maine console pe dikhiaya hai na….usko tum jaise chae use kar sakte ho us data ko api me hit kar sakte ho endpoint ke through backend ka jo endpoint hai uske through axios ya kuch bhi use karke backend me vej do fir wo data kisi database me store ho jayega simple toh hai
@@robertmark5234 ye bhi possible hai aisa bhi kar sakte ho
Sir agar reactnative aisa form bna na ho tab kya use karegay
achha mai kossis karunga aisa kuch bana ke dikhane ka
Bro Mui ko react hook form with yup validation py mega video bna do jis mai all fileds explore kro react hook form ki like watch ,setValue,isDisrty,dirtyFIelds etc..plz make video on it
bhai tum ek no chiz bol rhe ho aur ye mai video banawunga bhi, lekin kya hai na dimag me topic pe topic aa rhe hai sab pending hai but baynege jarrur ispe bhi 💯
@@toofanicoder isi week mai bna dalo humble request to you ..pori youtube py ap k lectures achy huty plz sath mai controller b use krna react hook form ka with Textfield from Mui and explore react hook form watch ,setvalue isDirty and other more plzzz🙏❣️
bhai sure nhi bol sakta, agar mai apne room me hota to video jaldi bana deta but thoda travel kar rha hu, kossis karta hu bhai
@@toofanicoder ok waiting of playlist🙏
Bhai drop-down aur react date range ka validation add kar sakte o kya
bhai ispe video already hai bhai iske kuch piche videos check krna mil jayega but wo version 6 ka hoga ekdam halka chnages hoga tum samjh jawoge wo video dekh lena usme maine material ui ke sare form components ke upar validation ka video banaya hai
@@toofanicoder ok thank you check kar leta hoon
Bhai stepzilla pe koi idea hai, bahut koshish kiya lekin koi solution nhi, office me wo bola h use krne ko, warna mujhe isi pe jana hoga.
bhai stepzilla pe video to bana de sakta hu, maine npm pe check kiya docs to kafi simple and easy to use hai bhai
@@toofanicoder ha bt wo functional component pe work nhi kr rha. Aur jitna bola h use krne wo maine use kiya bt it didn't work properly. Only validation part me prob aa rhi mujhe bcoz wo next button ko connect nhi kr pa rha. Aur UA-cam pe ek bhi tutorial nhi mila Stepzilla ka... So i decided to go with your this tutorial. Dekhte hn approve ho jaye
bhai class select krne k baad !important laga rha hu fir bhi purple se green nhi ho rha. Agar kchh h to btao.
How Can I display total Data in last step
last step or after final form submission??
just collect every individual step data and set on global state management and show all data in last step
media query v bata dete sir
bata dunga sir ji 😄
1 like for your name😂
Hello I'm from Panama. You can share source code?
In the description
github.com/toofaniCoder/material-ui-stepper/tree/multi-stepper-rhf
Hello, I have recently completed my MCA. I would be very grateful if you could refer me for a ReactJS developer or MERN stack developer position in your company. Thank you.
Aap code ese explain krte ho ki jese aap khud confuse ho aap bhut jldi jldi bolte ho ki smjh nhi aata kya bola aapne
wo sb to thik h lekin hme achhe se smjh aa jata h, long video dekhkr kchh log skip kr jate hn na isliye ye jaldi jaldi me short banane ki koshish krta h. So hope u got my point...