Discover Angular's core concepts and advance to building a complete SPA. Gain hands-on experience by creating modules, components, forms, routing, and APIs in an e-commerce app.

angular_setup.tar.gz

angular

In this course, you will cover the most fundamental concepts of Angular, a popular JavaScript framework. You will learn everything about building a complete Angular app, setting up the development environment, and building your own single-page application (SPA).

You’ll start off by covering the basic building blocks of Angular such as modules, components, and directives. After that, the course will introduce you to some more advanced material that focuses on forms, routing, and dealing with APIs. 

By the end of this course, you will have gained hands-on experience by building a fully functional e-commerce application.

A Hands-on Guide to Angular

Now each of these has its own advantage over one another, and it is totally up to the developer to choose based on their requirements. 

One of the many reasons you would choose to work with model-driven forms is to make it easier to unit test and use up other great features of reactive forms, like `Custom validation`. You can do most of the work from the component class and only put the instances of the input fields on the template.
 
In this lesson, we will look at how to make the best use of these forms using Custom Validation provided by Angular’s reactive forms.


# Validation
Users like it when forms are interactive, i.e., they let them know if there is anything wrong that they are doing. To get the best results out of a form, you need to ensure that the users’ inputs are validated, and all the required fields are filled. You can validate that by either using built-in validators or a custom validator.

Validators are either `sync` type or `async`. This means the validator either returns an error or null right after the input from the FormControl instance or waits for the returned Promise/Observable to execute to throw a set of validation errors at a later point.

# Validation example

```
this.customerForm= new FormGroup({
    'name': new FormControl(this.customer.name, [Validators.required,
      Validators.minLength(4)])
```

You use Angular's built-in reactive form validators by adding the Validators to the class and using the validation property. For example

- Validators.required
- Validators.minLength(4)

You can see some of the built-in validators here:



|     |     |
| --- | --- |
|  required   |   email  |
|  maxLength   |  minLength   |
|  pattern   |   nullValidator  |
|  compose   |   composeAsync  |


These attributes are the same for both template and class. 

# Custom validation
Custom validation lets you create your own customized validation based on your requirements. 

```
function classValidator(control: AbstractControl) : {[key : string] : boolean} | null {
return null;
}
```

Since our custom validator is a function, we use the `function` keyword followed by the name of our `validator` that we want to create. As an argument comes the `FormControl` or `FormGroup` for which we use the base class  `AbstractControl`. The next part means the type of value that will be returned by the function. So if there is something wrong with the input field, it returns an object in the form of a key-value pair, where the value is of type `boolean`, and the key is of type string. If everything works fine with the input field, it returns `null`.

## Example

Let's create an **age validator** here.

```
// Custom Validation code factory validation function

function ageValidator(min: number, max: number){

  return (control: AbstractControl):{[key: string]: boolean} | null => {

  if( control.value !==null && (isNaN(control.value) || control.value <min  || control.value> max)){
    return {'ageValidator': true}
  }
  return null;
};
}
```

To apply this to your input field, use the name of your custom validator on the form control name inside the form group as:

```
constructor(private fb: FormBuilder){}

ngOnInit(){
    this.customerForm = this.fb.group({
      firstname: ['', [Validators.required, Validators.minLength(5)]],
      email: ['', Validators.required],
      age: [null, ageValidator(20, 70)]
})
```

In this lesson, we will learn about validating our forms and creating custom validation for complex use cases. We will also look at the best way to use reactive forms with validation.

Course Overview

Introduction to the Framework

Building Blocks of Angular

Basic Concepts in an Angular Application

Forms in Angular

Routing in Angular

Services and Dependency Injection

Dealing with APIs

Implement the Above in a E-commerce App

Login and Authentication

Summary and Resources

Custom Validation