fbAPIKey

fbAuthDomain

fbDBUrl

fbProjectId

fbStorageBucket

fbSenderId

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

Angular Designing and Architecting Web Applications.png

angular-starter-v5.tar.gz

Angular

Angular Install Dependencies

Angular with Relaunch

This course will teach you step-by-step how to design and architect large Angular applications. 

You’ll start with the basics: components, pipes, and directives. These are the building blocks of any Angular application, so you will get plenty of hands-on practice with this material. Next, you’ll ramp things up by stepping into modules, routing, and RXJS, where you’ll learn how to declaratively manage data and dive deep into observables.

In the latter half of the course, you’ll cover reactive and template forms (crucial for handling user data), as well as custom validators and setting up authentication with Firebase.

By the end of this course, you'll be able to design large, scalable applications, be able to develop rich interactive components, and you’ll really understand how Angular works under the hood.

Angular: Designing and Architecting Web Applications

Let's validate the other inputs in the form. We're going to introduce new validators. This means that we'll have to add additional messages as well. Let's get started.

# Validators

We'll be modifying the configuration object for the form group we created in the `app.component.ts` file. We'll update it to the following:

export class AppComponent {
  ccForm = new FormGroup({
    name: new FormControl('', [
      Validators.required,
      Validators.minLength(3)
    ]),
    num: new FormControl('', [
      Validators.required,
      Validators.minLength(16),
      Validators.maxLength(16)
    ]),
    expiration: new FormControl('', [
      Validators.required,
      Validators.pattern(/^(0[1-9]|1[0-2])\/\d{2}$/)
    ]),
    cvv: new FormControl('', [
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(3)
    ])
  });

  submit() {
    console.log('form submitted');
  }
}

We're making a lot of changes here. Let's run through each form control's validators one by one.

## `num`

The `num` form control refers to the credit card number. We're making it a required value using `Validators.required`. This will go for all other fields as well. We're also checking its minimum and maximum length using the `Validators.minLength` and `Validators.maxLength` validator functions, respectively. Typically, credit card numbers are 16 characters long. We're using these validators to ensure the value is exactly 16 characters. No more, no less.

## `expiration`

The `expiration` form control is for the expiration date of the credit card. Most cards use the same format for their expiration date, which is `MM/YY`. We want to ensure the user is using the correct format. This will require the use of a regular expression.

We can use a regular expression using the `Validators.pattern` function. The first argument of the function is the regular expression. Whatever the user inputs must match the regular expression. 

The regular expression we're using is `/^(0[1-9]|1[0-2])\/\d{2}$/`. Here's a summary of what this regular expression does
:

- The first character can either be a `1` or `0` because the first number in the expiration date must represent a month. If the expiration date occurs in the first nine months, the number for the month must be prefixed with a `0`.
- The second character could be any number, 1 - 9 ONLY, if the first character was `0`. If the first character was `1`, then it can be any number between 0 - 2.
- The third character must be a forward slash (`/`).
- The fourth and fifth characters must be digits.

A better summary can be found [here](https://regexr.com/).

You can paste in a regular expression. The tool will break down what the regular expression will check for.

## `cvv`

The `cvv`, also known as the security code, will be a required value. Most security codes on credit cards are about three characters long. We're using similar validators as the `num` form control. We're using the `Validators.minLength` and `Validators.maxLength` to make sure the security code is exactly three characters long.

# Adding more error messages

We're using new validators for which we haven't added messages. We'll need to ensure our input component will output messages for the `Validators.maxLength` and `Validators.pattern` functions. In the `input.component.html` template file, we'll add the following:

We're making a lot of changes here. Let's run through each form control's validators one by one.

## `num`

The `num` form control refers to the credit card number. We're making it a required value using `Validators.required`. This will go for all other fields as well. We're also checking its minimum and maximum length using the `Validators.minLength` and `Validators.maxLength` validator functions, respectively. Typically, credit card numbers are 16 characters long. We're using these validators to ensure the value is exactly 16 characters. No more, no less.

## `expiration`

The `expiration` form control is for the expiration date of the credit card. Most cards use the same format for their expiration date, which is `MM/YY`. We want to ensure the user is using the correct format. This will require the use of a regular expression.

We can use a regular expression using the `Validators.pattern` function. The first argument of the function is the regular expression. Whatever the user inputs must match the regular expression. 

The regular expression we're using is `/^(0[1-9]|1[0-2])\/\d{2}＄/`. Here's a summary of what this regular expression does
:

- The first character can either be a `1` or `0` because the first number in the expiration date must represent a month. If the expiration date occurs in the first nine months, the number for the month must be prefixed with a `0`.
- The second character could be any number, 1 - 9 ONLY, if the first character was `0`. If the first character was `1`, then it can be any number between 0 - 2.
- The third character must be a forward slash (`/`).
- The fourth and fifth characters must be digits.

A better summary can be found [here](https://regexr.com/).

You can paste in a regular expression. The tool will break down what the regular expression will check for.

## `cvv`

The `cvv`, also known as the security code, will be a required value. Most security codes on credit cards are about three characters long. We're using similar validators as the `num` form control. We're using the `Validators.minLength` and `Validators.maxLength` to make sure the security code is exactly three characters long.

# Adding more error messages

We're using new validators for which we haven't added messages. We'll need to ensure our input component will output messages for the `Validators.maxLength` and `Validators.pattern` functions. In the `input.component.html` template file, we'll add the following:

In this lesson, we'll validate the other inputs in the form.

First Steps

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

Validating the Other Inputs

Validators