Lecture 42, Part 1: Form Validation

Loading...

Из курса от партнера Johns Hopkins University

Single Page Web Applications with AngularJS

1429 оценки

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

Johns Hopkins University

Single Page Web Applications with AngularJS

1429 оценки

Курс 5 из 6 — Specialization Ruby on Rails Web Development

Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.

Из урока

Module 5 - Form Validation, Testing, and Restaurant Site Development

Welcome to module 5! This is the last module in the course. We'll start this module by learning just how easy it is to validate forms with Angular. We will then delve into unit testing our AngularJS code. We will go over how to set up tests for every type of major Angular artifact: controller, service, directive, and component, as well as how to test services that access the network through the HTTP service. However, the last part of the module is the most fun. We will take the site that was developed for our real client in my previous course and re-write the entire thing using AngularJS. However, the coding fun doesn't have to stop there. After you finish the required part of the course, you can move on to the optional bonus part where we take our newly developed AngularJS application and enhance with it even more features that will allow the restaurant owners to administer their own data. We'll go over setting up authentication, editing restaurant menu items, uploading menu item pictures and so on.

Welcome to Module 52:09

Lecture 42, Part 1: Form Validation8:26

Lecture 42, Part 2: Form Validation10:35

Lecture 43, Part 1: Testing Javascript with Jasmine8:31

Lecture 43, Part 2: Testing Javascript with Jasmine12:58

Познакомьтесь с преподавателями

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[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.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2019 Все права защищены.

Загрузить из App Store

Загрузить в Google Play