[SOUND] Okay, so we're back in our code editor and I'm located in Lecture 42 folder which is located in fullstag.course five examples folder. And this is a simple app called SimpleFormsApp. And really all it has here is one controller called RegistrationController, and we're giving it a label of reg, as reg controller as syntax. And it has a form, so it has a form that we're going to fill out, and it's basically a registration form, username, email address and a phone number. So there's a few input fields here. Let's take it one by one. The first one input field is username. They are named here and you can see it's inside the form, we definitely named the form. And we wanted to make sure that the native browser validation doesn't kick in, so we gave it a novalidate attribute. Now the first thing we needed to do is we need to bind our text field, our username text field, to an object inside of our controller. So here we have ng-model. And we have reg.user.username. And the reason we're doing it is because we want all the registration for this particular user to reside in this user object attached to the instance of our controller. So the username is going to be user.username. If you scroll down, you'll see the email will be user.email, and so on. Okay, then we're going to declare a couple of validation requirements. One is required, meaning I don't want this text box to be empty and be considered valid. And the other one is minlength, meaning that I want my username to be at least four characters long. And for the max length we're going to use the Angular version of this, which is ng-maxlength, even though we really don't need to here. And we'll give it a 10, so the username cannot be longer than 10 characters. And right after that, right after this input field, we're going to go ahead and interpolate the value that we're typing in into this text field, this reg.user.username. We'll just interpolate it to the screen right next to it. Right below we have a couple of spans here that, basically, is going to provide our error messages to the user. The first one has an ng-if. So it means it's going to show up here if this ng-if is going to evaluate to true. It has a little bit of a more complex condition. Basically, it has these params right here, meaning if this is true and this is true, that's when this error message is going to show up. So let's take a look as to what this is exactly. So the regForm here is referring to our form and it has attribute of username and the username, again, is the name of our input field. That $error, and that's a special object that says that whatever errors you have in validation of this particular input field will show up here as the attributes that you declared on that particular input field. So required and minlength and maxlength. So at this point, not the ng, ng is just extra. But $error.minlength, if that evaluates to true, it means we have a validation problem with the minimum length requirement. So we're saying that if this is true, if you have an error with the minimum length. Or you have an error with required, the same thing, $error.required, then this condition, the whole this going to evaluate to true. So either this is true or this is true. Note that minlength does not imply that it's required. In other words, we could have this as not required, but if somebody does type something into here, we're requiring it to be at least four characters long. But if they type nothing, if the required attribute was not declared, then an empty field would have been fine, even though it is less than four characters long. And we're saying that if either one of these things is true and our Form.username is $touched, meaning somebody clicked into this input field and clicked out of it already, that's when this will evaluate to true. So we're saying that when somebody already basically messed with it and it’s not passing the minlength validation or the required validation. Then we want to say, Username must be at least 4 characters long. Very similarly we’re going to do the same thing with the maxlength. We’re saying if the maxlength is an error, and it’s already been messed with, it’s $touched. Then we’ll say, Username must not be longer than 10 characters. Let's go ahead and save that. Let's go to our browser where I already started browsing for this project. And let's go ahead and try typing something. We'll start typing coo, for example. Something weird is already happening. I don't know if you realize it or not. But if you go back to the code, you take a look, we interpolated this value right away. So usually when you type into a ng-model bound input field, whatever is bound to it immediately starts showing up on the screen, and this time it didn't. And the reason it didn't is because the value from this input field is only copied inside of the ng-model bound property if older validations for that field have passed. But since we only typed in coo, that's less than four characters long, which means the validation hasn't passed it. It means it's still invalid, so it does not get copied in here. So let's go back, we already see the error message. Let's go ahead and reload. And now, if we type in coo and type a k, you could see that now, this is starting to show up. But if we keep typing cookie eater, you could see that it's not showing up any more. Because again, we broke another validation rule because now it's longer than ten characters. So we click out of it, you'll see that now that this field has been messed with, the error message does show up that it must not be more than ten characters long. And you can see the red border around it. And the reason you see the red border around it is because if you go back and look at our styles. You can see that we said ng-touched, it's right here, it's ng-touched and ng-invalid. If it's the same element that has both of those classes, which is something that Angular inserted into our element. Then our border is going to be 2 pixels thick, red, and solid, and that's exactly what's going on right here. If we reload, click in here, click out of it, we'll still get a red and Username must be at least 4 characters long, because it is an empty field. But as soon as we type something in, and get out of it, i's now green. because we again styled it that it has to be green if it's actually valid. Okay, so let's go back to the code editor and let's take a look at the next field, which is email. And in this case, all we really specified was require. We didn't specify that it has to be an email type looking string that you type in this text box. And the reason we didn't do that is because it is implicit when an input type is typed as email that it has to be something at whatever domain. In this case, the ng-if, our error message, we're using the regForm.email and we're using another flag called $invalid. Which means we're saying that if this input field is invalid, meaning whatever validations that we declared on it, one is implicit email. The other one is the fact that something has to be there. If it's invalid and we've already touched this input field, it'll go ahead and output this message. So let's go ahead and save that and try it. If we type something else here, the first one that we didn't do anything with, and we click out of it, it's red and says it Must be a valid email address. If we type in something like cookie@ and click out of it, it's still not good enough. But if we say cookie@cookie, even though it's not necessarily a full domain name like .com, it's still a valid domain name. And therefore, it validates just fine. So if we click out of it, it will turn green to tell us that it is a valid field now. Okay, so let's go back to the code. And the last one is phone number. And the phone number is bound to this reg.user.phone property. This time, our validation is pattern based. We can actually give it a regular expression. So this time we're saying we want something that has three digits, dash, another three digits, dash, and four digits. So if it doesn't fit that model, this'll be invalid. And our span, meaning our error message, is very similar to before. It just says a phone, that's what we registered this field with. If it's invalid and it's been touched, we're just going to go ahead and print out Phone must be in the format, and give it to format. The last element is a button. And the button is disabled, we declared ng-disabled if the entire form is actually $invalid. So if $invalid, this will turn into true. Form is invalid, and therefore disabled will turn into true as well. Which means the button will not be clickable. We're also here prepared by saying when it is clickable, go ahead and reach out to our controller, our reg controller and call the submit method. The submit method is not going to do much more than just simply set the flag completed to true, and you'll see that this submission or registration summary will show up. And all this time, we actually had this Form valid? question where we just interpolated our regForm.$valid. So it at all times tells us whether or not it's true or false. Let's go to our browser, let's refresh. And let's actually make this true first. As we type, you can see that the form is still false. We'll say cookie@cookie. So now the form is true, and that's because we didn't make the Phone required. But as soon as I type something into the Phone, like 555, you see that the form was false. And the reason the validity of the form is false is because even though it's not required, but if you start typing something in, it better be matching that pattern. So that's why it is false. So if I do 555 and another four digits and if I type this last one, you could see the submit button now enables and the form valid is true. So we're able to click the Submit button and sure enough, our user name, email, and our phone number is displayed. So we're all good to go.
