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

Loading...

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

Front-End JavaScript Frameworks: Angular

597 оценки

The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

597 оценки

Курс 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. 6.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 through the HTTP client and the use of REST API on the server side. 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.

Exercise (Video): Dialogs13:16

Angular Template-driven Forms4:36

Exercise (Video): Angular Template-driven Forms Part 118:28

Angular Template-driven Form Validation7:22

Exercise (Video): Angular Template-driven Forms Part 27:45

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

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

Now that we have learnt about

template-driven form validation support in Angular in the previous lecture,

let's apply what we have learned to

the login form that we have designed in the previous exercise.

We will do simple form validation for the login form.

In particular, we'll specify the username and password as required,

and then check to ensure that the user types in information into these fields,

and be able to display error messages when the fields are empty.

Let's proceed ahead with this modification to the application in this exercise.

To get started on this exercise,

let's go to the login form here,

that we have in the login components template here.

We have already added in the novalidate attribute to the login form.

So, let's add in the template variable called loginForm to this template,

and then set this to ngForm as we understood from the previous lecture here.

So, by doing this,

we are specifying that this template variable enables us to track the state of the form.

So, we can even check for the valid or invalid state for this form.

Now, in addition, for each of these inputs,

we will also similarly add in the corresponding template variables here.

So, let me go to the next line here,

and there I'll say username is ngModel.

Then, we'll also specify this as required here.

Similarly, for the password,

we will add in the corresponding template variable here as password is in ngModel,

and then specify this as required here.

So, now that we have specified the template variables,

we can then carry out some of the form validation checks here.

Now, because we are specifying this as required,

that means that if these fields,

the input fields are empty,

then the required error will be flagged for this.

Similarly, now that we have the template variable for the form,

we can easily use that to check and disable the Submit button down below here.

So, for the Submit button,

what we do here is to use

the disabled field here,

and then we'll set the disabled field

to loginForm.form.invalid.

So, by doing this,

we will be disabling this button when the form is invalid.

So, thereby, the user cannot even submit the form when the form contains invalid entry.

So, for example, if the username is empty or the password is empty,

then the login form will be invalid,

and so the user cannot submit this form.

Now, this is one part of form validation that we can do,

whereby we can prevent the form from being submitted.

In addition, for each of these fields,

we can even display an error message to

indicate what kind of error is occurring in this particular field.

So, to do this,

to each of these form field elements,

we will add in the mat-error tag there,

and then we'll say stop ngIf,

and we'll say username.errors.

So, notice that we have already given this template a variable called username,

so that we can use in username.errors if there are errors and

if this error type is required.

So, if the error is a required type of error that is cause there,

then at that point,

we can specify that the corresponding error to be displayed is username is required.

So, that is the error that is going to be displayed for this field here.

Similarly, let me add the same kind of thing for the password field here.

So, let me copy that and then paste it in here,

and then we'll say password.errors.

Then, the message will be password is required.

So, by adding this,

we will be displaying error messages down below

these fields when the field doesn't contain any information.

Minor correction here.

That should be username?errors.required here,

and similarly, this one also should be.required here.

So, with these modifications,

my login component is now ready

to do the form validation and then display error messages.

So, let's save the changes and then go and take a look at the updated application.

Going to our application in the browser,

let's open the login form here.

So, you can see that now both the username and password carry

a star there to indicate that they are both required.

So, let me type in.

So, here, you see that the form is valid because it contains information,

and so the Login button will be enabled.

Let me remove the information from the password field,

and then you immediately notice that

the error is indicated here saying password is required.

Also note that the Login button will not be enabled anymore.

It'll be disabled. So, you will not be able to submit the form here.

But the moment I fill in something into the password,

then the Login button will be enabled,

and we will be able to submit the form here.

Similarly for the user name.

If I remove the username information there,

then you'll see the error being displayed here,

and also you will see that the Login button is not enabled at this point.

So, that's how the form validation can be carried out in this case.

So, as you have seen,

by adding in simple form validation to our application,

we can check to ensure that

the fields contain the information that they are suppose to contain,

and in the right format.

We will examine a little more of what form validation in one of the later exercises,

especially for reactive forms.

With this, we complete this exercise.

This is a good time for you to do a git commit

with the message template-driven forms, part two.

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

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

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

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

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

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