Svelte Tutorial for Beginners #15 - Forms (part 1)

Key Takeaways

okay then so in the last lesson we saw how we could pass all of this content right here reform into the modal as a slot and then render that inside the component using these slot tags so we know how to use those and now I'd like to talk a little bit more about forms but before we go any further what I think I'd like to do is extract all of the form content into its own components and then use that component right here because at the minute the code in this app dot svelt file is getting rather long and it's going to get pretty messy soon so let's delete all of this stuff right here in fact we'll just get rid of the h3 and then we'll cut this stuff because we'll just paste this in another file in a second and then inside source I'm going to create a new file and call this add person form dos felts so let's create this first of all we need a script tag at the top we also need some HTML so I'm going to do first of all this form right here and we'll come back to this and make it better in a second and then at the bottom we'll do a style tag just in case we need any styles in the future okay so we have this form right here and we have this input for the name and this input for the belt color I also want to bind these two two properties up here in the script so I'm gonna say let's name we don't need to initialize it with a value because when a user types into this it's going to update this variable and then also let belt color like so okay so we have these two properties now we want to bind the value of these inputs to these properties so that when we type into the inputs it updates these values as well we've seen that in the past when we looked at data binding so let me now say bind the value of this input to the name variable up here and let's do the same down here but this is going to be bound to the belts color so bind value equals belt oops belt color like so okay so we have these two inputs we've seen all of this kind of stuff before and they're just binding to these two properties right here now I want to do a third input and that is going to be for the age so let me do another input but this time we're going to use not text but number and that gives us a number input and that is a regular HTML and I'll show you what this looks like over here if we open the model we can't see it just yet because we've not rendered this component so let's go to app dot smelts and let's go to the top and import this new form component we created so imports add person form from and it's dot forward slash and it's add person form just felt like so and now we can use this down here in the content and we're going to place it in the modal so like so okay so all we're doing is importing this new component right here and this template and we're outputting it inside the modal so then all of that content is going to go into the modal and be rendered right here hope that make sense save it and I'll refresh try this out open modal and now we see this thing right here this is a number input and we have these two arrows so it's just a way to output a number in an HTML form right now the normal default behavior of JavaScript when we're reading values from any type of input whether it be number or text or anything else is to take that value and convert it into a string in JavaScript so when we read that value it will always be a string but in svelte what it does when we bind to a number input it turns that into whatever the type is here like a number an integer so I'm gonna say bind value equal to age and will create that up here so let's age and if we type in 5 here oops that should be colon not semicolon if we type in 5 into this field it's going to convert that into an integer and this will be an integer because in our data we're storing integers not strings it doesn't really matter in our case but just to keep it consistent and that's pretty nice that it if you wanted this to be a string you could then convert this to be a string if you wanted to okay so we have those three inputs now and we need also a placeholder on this so I'm going to say place holder is equal to age like so okay so we have those three things now let's take a look at what they look like name bell color and age and they're bound to those three variables now we also want to react to when a user submits this form now we can do this in two ways we can either attach a click event to this or we can attach a submit event to the form now I'm going to use the submit method because we've not seen that yet so I'm going to say on call one submit so just like we have a click event on something we have submit as well and that's always on the form the submit event if it was a click event it would be on the button but submit events are on the form because they're the things that are submit and this is going to trigger whenever we click on this button because when you click on a button inside a form it submits that form okay so when this happens we want to then invoke some kind of function so I'm going to say handle submit and I'm going to declare that up here so Const handle submit is equal to a function and inside this function all we're gonna do is console dot log the name the bell color and also the age okay so that's all there is to it pretty simple when we submit the form it's going to log out the current values of these so let me try this and you're going to notice something a little strange so if I open the modal type in a load of junk right here and let's just open up the console first of all so we can see what's logged out the age 45 add a person and it flickers there for a second but then it disappears and that's because the page were refreshed now I was talking about the default action of certain things before and I said that the default action of a form when we submit it is that the page is refreshed but remember I also said we had an event modifier to combat that and that event modifier was called prevent default let's use that pipe and then prevent default and this now prevents the default action that happens that occurs when a farm is submit so it's going to prevents the page from refreshing okay so let's save that and come over here again open the modal and if we say now or Yoshi and bell color is black and age is 25 at the person now it doesn't refresh and we see those values right here in the console okay so that's the basics of forms some of this we've seen before but if also showing you know this number input and how to submit the form and prevent the default action but in the next video I'd like to look at two other input types checkbox inputs and select boxes so we'll take a look at that next