Exercise (Video): Angular Template-driven Forms Part 2

Loading...

Из курса от партнера The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

533 оценки

The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

533 оценки

Курс 2 из 5 — Specialization Full Stack Web and Multiplatform Mobile App Development

This course concentrates mainly on Javascript based front-end frameworks, and in particular the Angular framework (Currently Ver. 4.x). This course will use Typescript for developing Angular application. Typescript features will be introduced in the context of Angular as part of the exercises. You will also get an introduction to the use of Angular Material and Angular Flex-Layout for responsive UI design. You will be introduced to various aspects of Angular including components, directives and services. You will learn about data binding, Angular router and its use for developing single-page applications. You will also learn about designing both template-driven forms and reactive forms. A quick introduction to Observables, reactive programming and RxJS in the context of Angular is included. You will then learn about Angular support for client-server communication and the use of REST API on the server side. You will use Restangular for communicating with a server supporting the REST API. A quick tour through Angular animation support and Angular testing rounds off the course. You must have either completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of front end web-UI frameworks to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript frameworks and the Angular framework - Be able to implement single page applications in Angular - Be able to use various Angular features including directives, components and services - Be able to implement a functional front-end web application using Angular - Be able to use Angular Material and Angular Flex-Layout for designing responsive Angular applications - Be able to use Observables and RxJS in the context of Angular applications

Из урока

Angular Forms, Angular and Reactive JavaScript

In this module we study Angular support for forms and form validation. Both template-driven forms and reactive forms will be introduced. You will also learn about Promises. Then you will learn briefly about reactive programming, RxJs and its use in Angular.

Angular Template-driven Forms4:20

Exercise (Video): Angular Template-driven Forms Part 137:56

Angular Template-driven Form Validation8:06

Exercise (Video): Angular Template-driven Forms Part 213:42

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

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

Now that we have a brief over view of template driven form validation support

in Angular let's apply what we've just learnt to the template driven form

that we've designed the login form that we've designed in the previous exercise.

So in this exercise we will add inform validation for

that login form that we design earlier.

To get started on this exercise, let's go to the login component.html

file where we have included the login form and so when we look at the form, we

already see that the novalidate attributes has been added to the form element there.

In addition to that, let's add in the template reference variable here.

So we would say login form, ngForm.

So this way the angular support for

template based form validation is brought into this particular form.

Similarly we will go to each one of these inputs and

I have the corresponding template reference ready so for

the username we will add in the template reference variable as the.

So let me add in right there, and so I would say,

username, ngModel,

similarly for password.

So you see that for fields, input fields here you would use

the ngModel to specify for the template reference variable there.

Now that we've added template reference variables for

the submit button that we have here.

We're going to disable this button when when the form is invalid so

going down to this button here.

So right after this here, I'm going to add

in the disabled, To this button.

And then I will disable this button under

the circumstance that the login form,

Invalid.

So which means the form is invalid.

This button will be disabled.

We'll see this behavior in a short while after we complete updating this form.

The second interesting feature that we will add to our form is that for

these containers, the mdInput containers,

the angular material supported, mdInput container for the input fields.

We will use the,

DividerColor attribute directive here.

This dividerColor attribute directive enables us to change the color for

this Input element if we are encountering certain errors here.

So how do we check for that?

So for the dividerColor I'm going to specify this inside a,

Interpolation with template expression here.

So I will specified the expression

as username.invalid.

So when the username is invalid and,

The username is not pristine,

if this turns out to be true then

we would set the color to warn.

So which means it will be red colored.

If this is valid and is not pristine, then

in that case we will set the color to primary.

So notice how I am using this dividerColor.

I'm setting the dividerColor to either the warn color which will

be red in this case, or the primary color which is the deep purple in this case,

for our particular angular material theme.

But we have used for this angular application.

So with this whenever

the field is invalid and is not pristine, then that color will be set to red.

If everything is okay then the color will be set

to the primary color which is deep purple in this case.

So using the dividerColor you can deliver a little bit of feedback

to the user about potential form errors within your form.

I'm going to apply the same kind of behavior also to that password.

Now from your JavaScript knowledge you must be familiar with this way

of expressing an expression.

So you give a Boolean expression on the left side with a question mark saying

if this Boolean expression turns out to be true, then this first value is used.

Otherwise the second value is used.

I'm going to copy that and then apply the same thing also

to the password field down here.

So I would copy and paste that and then change the username to password here,

because this field is referred to by the template reference variable password here.

So with this, we have added in the dividerColor as a way of delivering some

validation information to the user.

Now in addition, Angular materials also provides this

additional attribute called md-hint.

So within this md-hint whatever that you include will be displayed

just below that form field in your form.

So here we can add in some text that can be displayed just below

the field in case the field has errors.

So how do we set this up here?

So within this md-hint I can now set up the fields

in such a way that the information is displayed right below there.

So in here I would specify with a span

and apply that to hidden.

Whatever is inside this span will be hidden if

the username field is still pristine.

So if it is still pristine, then I don't need to show any errors here.

So let's span, so within this I can now include

messages that will display in case the form field has errors.

One of the messages that I will display

is in case the form field has not been filled.

So in this case I will check for not

username errors.

So this is the way that you will check in your template for a required

error being caused on this particular form filled here.

So this specifies that if the username has an error of the required,

meaning that the user did not fill in this field then you

can inform the user that this particular field has not been filled by you.

So this field is required so you need to fill in this field.

So here we will deliver a message saying, username is required.

So this message will be displayed in case

the required error is raised on this particular input field here.

This particular input field with the template reference variable

username error.

Similarly, I'm going to apply the same thing also to the password field.

So I will copy this and paste it into the password field.

So let me copy that into the password field also I will apply the same

modification here and for this obviously we need to check

the password template reference

variable and then also the message should say password.

So here I'm only checking for the required.

You can also add in checks for minimum length and maximum length.

So for example, in your web application, if you expect the password to contain

at least eight characters, then you can add in the min length as eight.

Meaning that if the user types in a password value which is less than eight

characters, then you can Inform the user if the password field is invalid.

So with these changes, let's save the changes and then take a look at how our

form will do form validation with the built in form validation support.

Going to my application now.

Let me open that form field.

And then you would type in the username.

So if I say abc and then the password.

Now, you notice how, because we have typed in information with a password,

the color of that password is being displayed in the deep purple.

Let me delete the password value.

Notice how the color has been changed to the red color.

This is a visual indication to the user what that particular field

has some errors.

The error being, password is required.

So you have an empty field here, you are supposed to fill the field.

So this message and the pattern is displayed using the md-hint here and

using the dividerColor we have set up the password to show the error message.

Same thing if I go to username and then remove that value you can see the username

is now red in color, but the moment I type in information that error

indication disappears, similarly for the password and so on.

Now if my form is invalid then you'll notice that my

login button will not work in this case because there is an error here.

But the moment I fill in the information, any information there, then you see that

my login button now becomes active and it is no longer disabled.

So this will enable me to submit the form.

So by using the disabled on that button here,

we were able to disable this button In the situation when my form is invalid.

But now that it's valid, I'll be able to submit the information.

So this way you will be able to make sure that

the user typed information will be validated

already on the client side to a larger extent.

And so you would avoid the possibility of sending an incorrect information

to your server and then wasting one round trip time in order to discover simple

errors that could have been completely diagnose on the clients side itself.

So in this case as you see if my fields are currently unfilled,

my log in button doesn't work.

But the moment I fill in the fields,

the login button becomes active and I'd be able to submit that value there.

With this, we complete this exercise where we have used the built

in support in Angular for our template form validation.

And we were able to indicate to the user the errors within the form

through various means of feedback.

Either by displaying an error message below the form control element there, or

by changing the color of the form control element to give feedback to the users.

This is also a good time for

you to do a get comet random message template forms part 2.

[MUSIC]

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

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

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

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

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

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