How To Use Forms In MudBlazor (MudForm & EditForm)

welcome back to just Blazer program today we have another mud Blazer tutorial for you guys this time we're going to cover mud forms mud forms are a little bit different than edit forms and if you look at them side by side they might be looking you know that's pretty similar but there are some key differences here that you have to keep in mind that not even the actual you know the documents will show you so you have to kind of go out of your way to you know actually play with it a little bit before you understand but don't worry I've done that for you so you can actually you know get started with these mud forms in the way that I expect you to use them the way I would use them because it's all about me [Music] so in order to get started we need to go to mudblazer.com and then go find the forms and input sections I know you can't really see it from here it's cutting off the page but within there you're gonna find the form section and that's what we're going to be focusing on today all these other inputs here are pretty much self-explanatory and you can add them to your form while you want and it's really just a matter of what kind of data you want to pass into your form so that's really all there is to these inputs and once you know how to do one of them you know how to do all of them essentially maybe the file upload's a little bit different but it's also not that complex so we're just gonna be focusing on how to do a mud form and before we get to the mud form I want to point out that they do have an edit form support which is pretty nice because that means that you can follow the conventions you're used to with Blazer and still use their components and keep the style that they have and all you have to do is just uh the only thing you really have to keep in mind is how they would normally you know layer up their components when it comes to that style so following this exam example it's it's pretty simple you have your card and the content then you have whatever it is in there and there's nothing much more to it than that and then you just follow the normal edit form conventions that you would including having a model and a submit button uh that is you know that has the actual button type of submit which is how normal edit forms will work in this case however or and also um up here you're gonna have an onvalid submit as well that's going to take care of uh the actual submission so once so those three things that I mentioned the are not present here in fact you don't have a dedicated submit button you don't have a dedicated model and I and you don't have a dedicated uh submission function essentially so all that is basically up to you it doesn't mean you don't have to use it and it doesn't mean that I don't encourage you to use um like some edit form conventions here because I do you're going to see my example soon enough it's just that when you look at this you might see that those very important things are missing from this modiform and you don't have to freak out about it don't worry it's pretty simple and I'll show you my example right now so this is going to be my mudform project in this case I'm going to show you what I did uh within my mudforms in order to make a decent motor for my example and what I recommend for you to do as well I'm going to show you the differences between month form and edit form and in this tutorial I'm not going to go over how to install mud Blazer how to get started from scratch what I if you do not know how to do that then I do have a video for you right there in case you want to check that out we're just going to be starting off with a mudform project right ready to go with my code in it as well so um before we get into any of the extra stuff I've done in here I'm just going to go over what the most important pieces of a form is so within your form apart from the actual structure of the form what you want your form to do is obviously to submit data so the important thing is knowing how to submit the data how to validate the data and how to handle the data and how to do the bindings correctly so in this case you'll notice that even the though before I said that mud forms do not require models I do recommend having one not only because it's more consistent it's also easier to pass this data through once you're done validating it into your API calls later on because eventually your forms have to your base you have a form for a reason your form is supposed to take in data and then pass it off somewhere else and usually that's going to be going to maybe a database or going into some API call somewhere for you to work with it and then have that in data somewhere so it's much easier to already have it as a uh if it's a class as an object essentially and you're passing in that that object through uh to wherever it is you needed to go so that's why I recommend mud if you're using mudforms to use it the way you would use it as an edit form uh having a model already ready to go So within our mud form you have other properties you have to keep in mind so the other property that's important is this at ref property this ref is the mudform object essentially and that object is what you will use in order to do some of your validation methods in there so when it comes time to actually submit you have to do your validations some way and one of the ways is to use this form object which I'll show you in a moment uh and these two here are just to keep track of the errors and to keep track of the actual whether or not it's validated or not and the reason why is because in this case there's a particular example has a success um this variable is being used somewhere else within the form for the register button so that if I went to the up here this register button is disabled until I fill out everything and then it will enable itself once it knows that it's successful so that's what that is for and that's what you could use F2 as well and bind errors is actually an array of strings which is all your errors so that they could show it off somewhere else which is how they have this going on all their errors will appear on this other side on this other mod component essentially and I'll just run through the error put it through the text the mud text and then you'll see it on the other side so that's how they actually have key track of these errors through this um to this array but that's it for the mud forms all you really need to know uh just know that whenever you come to your actual using value since we are using the the class the model we have to use the bind Value method that you would use in edit form if not then you wouldn't have this it would be binding the value maybe to something else or whatever but in this case because we're using the model method we're going to be binding it to the properties within the model So within our mud text fields and in fact within all these uh input um components for the mud form there's many of them the most important ones apart from the buying value stuff is whether you have it's required whether the error for the required you know you have one there and the validation is also really important as well so the validation is different because the validation is the actual you know uh the data annotations that you would be using so I have the class down here which I basically copied and paste from edit form so what's happening is that these data annotations are being written within the components themselves and I don't so I ran some tests on this I don't think that when it comes to some data annotations it doesn't work so I'll show you it with this with this age one but if you want to make sure that your data annotations work or your validation works or even if you have some custom validations do it through the components that's my suggestion because in this case we actually have two custom validators here so we have one as an innumerable and one as an actual function so if we go down to the password strength you see that it's well I guess it is a function too but um this is an innumerable and what they're passing is um their string and they're testing whether or not this string matches whatever thing they added and they're using a delegate for it that's what this is in case you don't know uh and for pastor match it's just a normal function instead and in this case I think the only difference is I made this string a nullable to try to amend some of the null issues I was having but that didn't help so you can do it if you want but it won't change anything and this is basically another check if the for a different validation so one of them is for the first password because there's two password um in this particular example there are two password inputs one is your main password the other one is going to be checking against it to see whether or not you wrote the second time correctly so it's one of those in this one um I added an age one to demonstrate some of the data annotation stuff and to demonstrate like a different like uh a different um value essentially um you could have it as text like I have it here or you could put it as as um as number in fact if you want to make sure that your input types are the correct types then you should use this because they are using you know password email and whatever up here and that's how you would do it through this input type property and this helper text is just an easy way of having the like the text that's uh at the bottom if you see down here choose a strong password that's the the text and that's how it looks like so it does save a little bit of time when you're trying to do stuff like that I think the other I think I think bazer has its own version of it but I don't remember now but they do have all this stuff and of course your label is there as well so you can just call your label everything in your mud text you don't need another thing call it label and then have two different components to do that you can just do it this way uh there's some radio stuff but I'm not really gonna go over it because it's basically just the radio group and that is just another input and it's not that different it's just having mud radios and then there might be some differences in there but you don't need this for a form um and if you do then it's rather simple but what you're getting at at the end of the of the day is a uh it's gonna be like a Boolean or something and the other thing is how you handle your submit so in this case we're in edit form just hopping over real quick it would require a button to have a button to submit and then up here you have either the on submit or on valid submit or whatever that function is going to be the thing that's actually gonna uh you know trigger whatever your API call is going to be in this case you're going to be triggering it as a um through your own function so in this case we have our own submit method to work with this and that is what's actually gonna trigger you know the actual submission of the form but when that happens you have to be the one to validate it so let's go there now so up here that's why you need that mudform object as a reference so that you could get some of the there are some functions and stuff here that you can look at uh events uh event handlers and whatever in this case the one thing you want is this validate uh task essentially so that you could revalidate your form before you submit it and then this will do a check in my case I'm doing a check to see whether or not it's valid if it's valid it's gonna change this Boolean into true and then I'm gonna do re-render the page essentially and what that will do is that right now it's going to be invisible until I submit it with a valid uh submission and then you're going to start seeing these values pop up that's basically my way of showing that you know that this was valid or not but in this case um I'm gonna run it and then I'm gonna show you something with this specific data annotations because not all the data annotations seem to work correctly or maybe I'm writing it wrong I don't know but I have a solution to this like basically it's just to if you want to make sure that your data annotations work just write them here through the uh to the validations but you'll see what I mean so let's run this and we'll check the mod forms real quick now you could use it you can use their mudforms if you want to that's uh encouraged and I do encourage you to to use it if you don't like it then you could use the edit forms and still use their components which is also pretty nice um but I do regardless which one you choose um try to follow the the model method it's my my uh my two cents on it so we're just gonna oh did I miss my data annotation here I think I was doing some changes and I missed the changes oh no nevermind it's fine all right so that's the password this has to be I think eight characters more or less with like every type oh writing this over and over again so I'm gonna show you basically the happy path as they call it of something that works no what was it 45 perfect so now everything's ready to go there's no issues if we were to remove this uh you'll see that there's an error and then this will basically disable itself uh but we're just gonna rewrite it again that's what that success bullying is doing so if I register with this it's going to show me going to the form is valid change those values to true make the state has changed so that this shows up now so you'll notice that uh basically this is just the you know when if everything's valid or whatever and if I mess up my password it's gonna complain got the password okay so we're gonna work on this age stuff so I can show you an example of this data annotation thing not working as you expect it to work so the model that I'm using has these data annotations right I just copy pasted the edit form what I really care about is this age so in my age I have a range of 0 to 100 with an error message of 0 to 100 years I also have this same age I added to the edit form version over here and I'm going to show you what the edit form version looks like uh uh if I were to put a thousand that's obviously outside the range and it's going to say 0-200 years if I did it here it says nothing but that tells me that there is a bit of a of an issue here um I've seen that some of the advantages do work some of them don't so in order to fix this problem for the edit forms you do need to add it to the actual component so in our case I'm just going to remove this from age I don't this is uh is the edit form one I bet I'm gonna go to the mud form one remove it from here now I'm not copying pasting it I'm copying pasting from somewhere else the red the actual attribute so if you look at the data annotations like this emo one here you will see that this is actually email address attribute is just when you have as a data annotation you do not need the attribute brief uh suffix but in order to use it outside of this you do need that attribute suffix and treat it like an object so I'm assuming new Range attribute 0 to 100 and then you have your error message like this so this is how is the how you would write this within the validation now if I run it again even though it's input text it will it will work so I go here write 1000 again now it recognizes it also even though I have it as input text if I try writing this is gonna if I try running a string that doesn't that the string of like whatever it has no numbers or is not an actual number it's gonna yell at me basically so it will work in order for you to do what you need to do um if you don't want to use the input type of number and it said you want to keep using the input type of text to keep some uniformity over your forms like I've done that before and that and then you'll know that the validation will actually work at that point so that then you saw when I when everything works it's uh it will show up here so that's how you would deal with your issues with validation moving back to the code again within the mudform object we have these four uh we have these um we have these functions validate reset and reset validation this forces a validate which is what we use every time we uh before we submit to the um to an API or whatever it's always encouraged to a validate obviously to validate the uh validate your model you can reset reset basically means he's going to wipe the everything off the form and reset validation means that it will reset the validation but it will keep the ball of values within it so let's do a quick test on that I'm just gonna everything is just wrong and we're going to reset the validation uh when it comes to this reset number I'm not really sure what's happening here um because when I do that it'll go back to normal if I reset it it also goes back to normal if I try to validate it uh what's happening here is that this password I changed it so really only this one is being validated this one has like only the only time it gets validated is when I'm actually trying to type between the two because this was the only one I care about is the top one and the age is not validating because there's a zero in here and the only time I found an issue with it is if I try to write some number it says non number and I try to reset it it won't catch it I'm not really sure why this happens but if I reset it normally or if I try to or if I do a backspace it's fine I assume it's because of like it's not removing the string values not removing the empty string or something like that or it's not catching it uh it's something to do with the binding in there otherwise it all seems to work just fine and the out of the box validation here is okay and if you needed to be more robust you have the ability to do it so I do like the mud Blazer validation I am uh I will say that it does have some issues from what I can tell I really wish that I found out what I did here or what's going on that didn't allow the the actual validation to work too well here for the h but the solution is to add it to the actual component itself um which is all right I guess because that is how it was meant to work or initially um from what I could tell it it just is a bit um it does kind of suck that we can't you know have the the one to one when it comes to having everything in your classes and then having in your validation here within the actual mud Tech stuff because it works here in the edit form so I'm not really sure what all that is about maybe I did it wrong maybe you guys have a solution out there that could teach me as to what happened but either way do you have a workaround for them well let's hop on over to the edit form and see how mud components work with it so basically all you're using is just the mud components for the actual look and feel of the form everything else is essentially how you would write a normal edit form so in that what I mean by that is that you have your edit form as your parent component and within that you have your model whatever the model is going to look like and then you have the function for the onbound submit or the on submit whichever one you choose to use to actually submit uh go to the submission process you are using their validation uh components so the data annotations validator and the validation summary are available to you and you have access to them in this case when it comes to the actual mud components again you have to follow their you don't have to follow it but like if you want to keep it nice and uniformed um you know you have your whatever the upper layer component is the mid layer whatever it is up until you get to the actual content so when we finally get to here the actual values are using the bind value um uh event callback and this is how your validations also look like so this is the same thing as you would see in the normal Blazer form without mud Blazer you'll be using this this will allow you to show the validations like actually in in line with your text so that's just the normal Blazer way in case we've forgotten uh you still have you still could use the properties so their input type input type text is still there you have class properties their helper text is still there label but those things are still available to you and the only other thing you have to keep in mind is the actual submit button this one does need the button type submit in there unless you're gonna do the a submit uh your own uh submit button if you want to do it that way however you will not have access to the the resetting of the valid validations like you did uh in the mud Blazer form so you won't have access to to validating resetting and reset the validations uh easily you can do that here but you have to go through some extra steps to do that um like any other Blazer form and and basically you just have a normal edit form apart from using the mud Blazer components there's nothing else extra in this that you get it's just only the look and feel at that point if you want to think of it that way so at that at this point in time I believe this is really all you need to know for mod Blazer forms I know that when you go here there's a little bit more to it there's how to do a different type of validation using fluent so but I think if you want to see that that that's more of a fluent uh kind of thing it's not really a Blazer thing um if you want to see that you know if you're interested in that let me know but again not really a Blazer specific uh thing all I really cared about was the edit form that you have uh for for your projects and then how to actually use their kind of validation so just all the important parts you need and you have access to all these other and of course you have access to all of their inputs as well that you could add to the form and it basically works the same way that you just add them there make sure you bind the values and just and then your validation should be in line like this or should be within the components like that and you should be fine if you do it that way you have the ability to create your own custom validation you could do it here too you just have to create a custom data annotation as an asp.net core stuff so that's not really like a Blazer specific thing but for mud Blazer a within their properties they have the their inline validation they have their validations Within the actual components um submission you handle it on your own you have access to some extra functionality through their forms and just make sure that when it's all within this mod form you have your reference to it so you could use it along with uh keeping track of your own submit button and making sure that you handle your validations when you and that's the the the basic you know basic but like that that's basically uh mud forms in a nutshell those are the most important bits of it I believe if there's anything else I might have missed let me know and uh and yeah stay tuned for the next one hey guys I hope you enjoyed the video and if you do please give me a like And subscribe maybe check out this next video here maybe maybe sort of also I have a free blade cheat sheet for you I worked out very hard on it and it's just basically condensing everything that Microsoft docs would tell you that you might need for your next laser project

Channel: Just Blazor Programming

Views: 7,751

Keywords: blazor, C#, blazor C#, blazor 2022, blazor tutorial, .net blazor, C# blazor, what is blazor, .net 6, blazor webassembly, .net programmer, programmer, software developer, how to blazor, C# developer, Microsoft, .net, wasm, blazor wasm, .net 7, blazor .net 7, MudBlazor, MudForms, MudTextField, Mudblazor forms, how to make forms in mudblazor, editforms in mudblazor, editform, Blazor form

Id: 6Vp3baHpQV0

Length: 26min 12sec (1572 seconds)

Published: Thu Mar 09 2023