[SOUND] Form validation in Angular is very simple. In fact, I've heard of some small projects that don't use Angular in their entire application. But only import and use Angular to validate their Forms. If you've never dealt with Forms before, let me give you a quick overview. A Form is a collection of controls, which are usually made of HTML controls. that users can interact with, by choosing or entering data into them. One control, we have worked with credible this point is the text box. You can see that each input type, has a type attribute whose value tells the browser how to display that input. Input type text, tells the browser to display that input tag. As a single line text box. Type value of texted area, displays a multi-line text box, which you can also use to enter text. There's really not that much more to those type of input elements. So, I'm not going to go through every single one of them, and explain what they do. Input type checkbox, is guess what? It's a checkbox. The last type displayed in our example form is, submit. The submit type is larger historical as forms used to be submitted by the browser. Where the browser automatically collected all values of the form, ranging them by key value pairs, and constructing a you request. To the action attribute on the form element, containing those key value pairs. Note that I'm not showing the action attribute on the form element, in our example. That's because we're going to have our own front-end logic handle data, attached to the input fields, using angular. Submitting the Form using a declared action attribute, does not really fit into the single page application paradigm. But, the input type submit mainly displays as a button, so we could still use it. However, we could also use the HTML button tag here. Collection of all the inputs under a single form tag. Is not a requirement as far as HTML document validity is concerned. But it does provide the ability for us, to naturally group those inputs together. And is needed to use Angular Form validation. Okay, let's go over the steps involved in setting up Form validation, in AngularJS. First, you must create a form with containing input elements, and give the form as well as the input elements a value for the name attribute. Form validation functionality, is introduced into our HTML. With a ng-model directive, that we've used multiple times before. Note that I'm assuming that you have a controller surrounding this form, whose instance label, or controller s syntax. Has been set to ctrl, that is why you see here, ng-model="ctrl.name". We're binding the name property, of the controller instance to this text input box. Optionally, we can also assign our button in ng-click. So we are ready to do something with our bound data in the controller, once everything validates. However, for now we haven't ask their form to actually do any validation. That's what we'll do in the next step. Step 3, is to declare HTML5 validation attributes. In this case, you could see that our text box, has required a min-length validation attribute set. Which means that we're announcing that this text box cannot be left empty, thus required. And, when you type something into it, it has to be at least four characters long. We can also optionally specify the same validation attributes, that are supplied by angular. For example, instead of min-length we can use ng-min-length. The only difference between the two, is that with ng-min-length attribute. It's value can be a regular Angular expression, without having to use the double curly bracket to interpolate it. That's useful if you don't want to hard code the value for min-length, and instead. Have that value retreat from controller instance, or some other Angular container. Note that since we want Angular to take care of valuation, we need to disable the more limited native browser form validation. So it doesn't get in the way. We can do that by specifying novalidate attribute, on the Form element. Step 4, is for us to use Angular Form bound objects, in order to effect our UI and give feedback to the user. In this case, you could see that we have an error message that is wrapped with a span and a ng-if. Which means it will only show up, if the things inside of the value for the ng-if attribute are true. In this case you see we have formName.name, meaning the name of our input field, .$error.required. So we're saying that if that's true, and. && stands for and, formName which is again the Form. With the name that we declared it which was formName.name, referring to the input field with the name attribute, equal to name.$touched. All of these object, are being made available to us by Angular. The reason you're able to refer to the Form object by its name, and access the input fields. Through a familiar dot notation is because when Angular compiles HTML contained with the ng-app directive. And sees the form tag. It automatically creates a special controller, called form controller. Who's instance is attached to our dollar sign scope, with the name that the format should name specifies. This process is very similar to the controller as syntax, where our controller is attached to the dollar sign scope. With the name we specify as our label. Inside the Form controller, Angular creates a bunch of objects that keep track of the requirements and validity. Of each named input contained, in the form. We can then access those objects using the formName, as well as the names of the input fields. So in this example, we're using the ng-if directive, passing it an expression that will evaluate to either true or false. If both are true, meaning that the name input field has a validation error. And it has been touched, signified by the $touched property. The error message, name is required will appear on the screen. The $touched property, is an input state indicator. It's true if the user clicked into our input field, in other words, touched it in some since. Since we don't want an error message displayed, before the user even had a chance to try to enter a value. We add this condition, to prevent that. If the user clicked into the text box, and still left it blank by clicking out of it, the error message, Name is required, will be displayed. Angular also creates a number of bound properties, on the form object itself. For example, we can use the $invalid property, to conditionally enable and disable the. Submit button, depending on whether or not the form is verified to be valid. We'll enable the Submit button, only if the $invalid flag is false. Step 4 is for us to use Angular validation styles. Behind the scenes, Angular's helping us out even more by injecting and removing its validation related classes. From our input fields. We can use that by providing styles, for those classes in our style sheet. In this case, we're turning the border of an input element green. If it has been touched by the user and is valid, at the same time. And red if it has been touched, but failed the validation. For a complete list of the CSS classes, you could style based on angular validation. And a complete list of validation bound objects. Look up ng-model, ng-model controller, and form controller documentation. Okay. Time to give back to the code editor, and try out some form validations.
