- Read Tutorial
- Watch Guide Video
I'm really liking the structure that we have on our proposal form and we still have some more work we have to do on the form obviously.
But I love that you can have your form right here and you can have live updates happening on the right-hand side. I think that's going to make for a really good user experience.
I also like how this is fully responsive. So watch what happens when I shrink this down to a smartphone size. You can see that the system right here all of our generated proposals are just going to go down below and the forms going to stay on top.
So that's pretty much the kind of user experience I was looking for there. Now in order to get this side of it working, we're going to have to get some validations in place. We already have our validations like this where I can come here and if I start typing something in and delete it it's going to say customer name is required and that's fine. But I wanted to show you how you can implement a little bit of kind of a more advanced way of doing it. So here if you notice we have <div [hidden]="customer.valid`
So this item is a div and it's only shown when the validation is being called. So it makes logical sense that this is what we need to style because that's one of the first things I always do whenever I'm going to add some more advanced styles especially ones that are dynamic. It can be a little intimidating if you've never done it before because you may think where in the world do I even start?
The best place to start is right here. You can also in the browser come and click inspect and this will bring up the inspector and you can see your element and right now it doesn't have a selector. So I think that would probably be one of the very first things we need to do is let's add a class to it. I'm going to come under the div hidden and come give us another line. Just so it's a little bit easier to read and I'm going to add a class and I'm going to just go with our bootstrap classes. So I'm going to go `class='alert alert-danger'. Now if I hit save watch what happens if I come over here and start typing and then get rid of it. Look at that. That was a really cool little validation right there. I think this looks a lot better than just the text. And it even gives the red color. And I think that's going to make for a much better user experience
And the same thing will be applied to all of the other ones.
Now let's come and let's just add this class alert to each one of the items so I'm going to come down here and paste this in on each one of these now let's hit save come back and let's test it out. So if I come to estimated hours hit three then delete it and it says you need to enter your estimated hours for the project. I hit three or four again and it goes away. So that's really cool.
I love how easy it is to implement validations and as you can see it's also pretty straightforward to style them because we have this segmented into it's own div element. It means we could treat it like anything. We don't have to make any changes for it just because it's hidden. We can add styles and we can work with these elements just like anything else on the page and then they'll be called when ever they need to be. Now if you're wondering about how I grab those styles or how I knew about them, those ones are pretty standard. If you've been working with even bootstrap 3 framework then you probably have come across the alerts before and so those ones you just kind of memorize.
If you want to you can come to bootstrap4's website come to components. Click on alerts which is the first one that comes up. And as you can see right here you have all of your alerts
You can come and later on when we create a confirmation message for create proposal. We're going to get into how we can actually add links inside of these and how we can style them with special colors and even how we can do things like having the ability to dismiss it. Now obviously we don't want to have that ability to dismiss it right here we want that validation to be in place as long as it's required because remember we have a setup where our model is listening and our forms listening to make sure that the right data is in there. So we don't want the user to dismiss it. We want them to dismiss it by entering in the correct values.
That is how you can style validations in angular 2.