Angular Fundamentals: Collecting Data with Angular Forms and Validation

Welcome back to this review of the Pluralsight course Angular Fundamentals by Jim Cooper and Joe Eames. Excluding the 2 minute course overview, there are 16 modules in this course and we have reached the 6th module: Collecting Data with Angular Forms and Validation.

The previous modules are:

• Getting Started With Angular
• Creating and Communicating Between Angular Components
• Exploring the Angular Syntax
• Creating Reusable Angular Services
• Routing and Navigating Pages

All of these modules are produced and narrated by Jim Cooper, and he continues his tuition in this module.

The Angular Fundamentals course is an intermediate level course and is the 5th course on the Angular Learning Path.

If you want to learn Angular Forms from scratch, a good alternative is the beginner level course Angular Forms by Mark Zamoyta. In this module Jim Cooper also teaches Reactive Forms which give you more control over your validation. You probably won’t need to know them if your forms are very simple, but you will need them if you aim to become a professional Angular developer.

Collecting Data with Angular Forms and Validation

Using Models for Type Safety

Jim explores some ways in which we can leverage TypeScript features to give our code type safety. In Angular the degree to which you use TypeScript features is your entirely choice.

Creating Your First Template-based Form

There are two types of forms in Angular: template based and model based (also known as reactive forms).

Template based forms can be built entirely in your HTML template and this works well for simple forms.

Reactive forms allow you to put a lot of your logic in the component instead of the template. They are generally more powerful but also more complex than template based forms.

In this clip, Jim shows us how to create a simple template based form. It has a username, password, submit button and cancel button. Jim’s discusses two-way “banana in a box” data binding, but ultimately decides to use one way data binding.

We also see how to add local variables in our form, and get introduced to ngSubmit.

Try the practice exercise.

Using the Data from Your Template-based Form

Our login form is now providing the data that we need. Next we will use that data to log the user in.

Jim creates an auth service in our user module. Initially the service just uses hard coded data in honor of John Papa. Jim adds this service as a provider in app.module.ts, and uses the service’s loginUser method in login.component.ts.

We add a login link to the navbar, and this links to our user/login route. Using the ngIf directive we display the login link only if the user is not already authenticated.

We see that we are able to login as John Papa, and then we a bit more coding we are routed back to the events page after login.

Validating Template-based Forms

We can use the HTML required attribute to easily add simple validation, but we can do much more than this in Angular.

Jim shows us all of the property information we can get, such as valid/invalid, dirty/pristine, touched/untouched. This is also covered in Mark Zamoyta’s course on Angular Forms.

One thing that can be easily done is display the text “Required” based on the result of an ngIf directive, and we see how to do that here. We can display this only if the fields have been touched, and are invalid.

We also see how to add mouse enter and mouse leave event handlers. When we hover over the login button it reveals which input are required to be entered before we can login.

Try the practice exercise.

Creating Your First Reactive Form

In this clip we make a profile form, which simply consists of a user’s first name and last name. The component also has a save button and a cancel button.

We start by adding some markup code in profile.component.html

Then in this component’s TypeScript file we implement OnInit. This method uses two instances of FormControl and a FormGroup. We set the FormGroup properties for each of our controls.

In our template we bind our FormGroup to the profile form using the form attribute [formGroup]=”profileForm”

Then each input is given the formControlName attribute and these are set to “firstName” and “lastName”.

To make our form reactive we need to import ReactiveFormsModule into our user module.

At the end of this clip, we have roughly equivalent functionality to where were at the end of the “Using the Data from Your Template-based Form” clip.

Try the practice exercise.

Validating Reactive Forms

Here we see we can enter a validator as the second argument when initializing a FormControl.

Validators is imported from @angular/forms and contains several static methods. One example of this is required.

Jim shows us how to change the styling of a textbox based on our form property values.

Try the practice exercise.

Using Multiple Validators in Reactive Forms

We can have multiple types of validators on a field, and Jim says this is easy: instead of passing in a single validator, we pass in an array of validators.

In addition to checking that a field has been entered, we create a validation rule for checking the validity of the first character that is entered in a field.

Try the practice exercise.

Diving Deeper into Template-based Forms

We start by creating a template based create event form. In an earlier module we created a component for this with some inline placeholder template code. We change our component to use a templateUrl.

Our event form is significantly more complex than the simple examples we’ve worked with before. It has fields for the Event’s Name, Date, Time, Location, City, Country, Online Url, and Image.

We see an example of using the ngModelGroup directive to nest a group of related field information in this clip.

One the form is all working we create a new “Ng Spectacular” event.

Editing Data with Two-way Bindings

Jim adds an NgOnInit method to the create event component.

It sets event to some hardcoded data which details our fictional Ng Spectacular event. In a real application we would get this data from an API call, but this works for demo purposes.

We use the banana in a box syntax to demonstrate two way data binding. But at the end of the clip these changes are reverted.

Diving Deeper into Reactive Forms

Here we create a reactive form for editing session information. Our sessions have properties for name, presenter, duration, level, abstract and voters.

We create a component named CreateSessionComponent with a ngOnInit method that initializes FormControl objects for each of our fields. We also see and hear Jim describe how to create a saveSession method in this component.

Creating Custom Validators

Jim creates a restrictedWords validator function which returns invalid if the input contains the very naughty word that is “foo”. If this word is entered then the textbox turns red.

Jim then adds an error message to display “Restricted words found: foo”.

Try the practice exercise.

Thanks for reading.

The next module in this course is Communicating Between Components.