Angular Complete Tutorial

Form group

Form group provides the functionality of grouping of a fixed set of controls that you can manage together. All fields in a form will be collected within a group and a FormGroup instance provides its model value as an object.

Create a FormGroup

1. Need to import ReactiveFormsModule in the app.module.ts.
2. Need to import Component from '@angular/core' in the component.ts.
3. Need to import FormGroup and FormControl from '@angular/forms' in the component.ts.

app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppRoutingModule } from './app-routing.module';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';

    @NgModule({
    
        imports: [
        // other imports ...
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule
        ],
    })
    export class AppModule {}

component.ts file 

    import { Component } from '@angular/core';
    import { FormGroup, FormControl } from '@angular/forms';
    
    @Component({
        selector: 'app-reactiveform-group',
        templateUrl: './reactiveform-group.component.html',
        styleUrls: ['./reactiveform-group.component.scss']
    })
    export class ReactiveformGroupComponent {
        userForm = new FormGroup({
        firstName: new FormControl(''),
        lastName: new FormControl(''),
        emailId: new FormControl(''),
        mobileNumber: new FormControl(''),
        address: new FormControl('')
        });
    
        onSubmit(){
        console.warn(this.userForm.value);
        }                                                  
    }

component.html file 
    
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <div>
        <label for="first-name">First Name: </label>
        <input id="first-name" type="text" formControlName="firstName">
    </div>
    <div>
        <label for="last-name">Last Name: </label>
        <input id="last-name" type="text" formControlName="lastName">
    </div>
    <div>
        <label for="last-name">Email ID: </label>
        <input id="last-name" type="text" formControlName="emailId">
    </div>
    <div>
        <label for="last-name">Mobile Number: </label>
        <input id="last-name" type="text" formControlName="mobileNumber">
    </div>
    <div>
        <label for="last-name">Address: </label>
        <input id="last-name" type="text" formControlName="address">
    </div>
    <div>
        <button type="submit" [disabled]="!userForm.valid">Submit</button>
    </div>
</form>
    

Form array or Nested Form

Form array provides the functionality of nested form. It is a dynamic form, where you can add and remove controls at run time.

Create a Nested Form

1. Need to import ReactiveFormsModule in the app.module.ts.
2. Need to import Component from '@angular/core' in the component.ts.
3. Need to import FormGroup and FormControl from '@angular/forms' in the component.ts.

app.module.ts
    
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppRoutingModule } from './app-routing.module';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';

    @NgModule({
    
        imports: [
        // other imports ...
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule
        ],
    })
    export class AppModule {}

component.ts file 

    import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms';

    @Component({
    selector: 'app-reactivenestedform',
    templateUrl: './reactivenestedform.component.html',
    styleUrls: ['./reactivenestedform.component.scss']
    })
    export class ReactivenestedformComponent {
    userForm = new FormGroup({
        firstName: new FormControl(''),
        lastName: new FormControl(''),
        emailId: new FormControl(''),
        mobileNumber: new FormControl(''),
        address: new FormGroup({
        street: new FormControl(''),
        city: new FormControl(''),
        state: new FormControl(''),
        zip: new FormControl(''),
        }),
    });

    onSubmit(){
        console.warn(this.userForm.value);
        console.warn(this.userForm.controls.address.value);
    }
  }

component.html file 
    
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <div>
        <label for="first-name">First Name: </label>
        <input id="first-name" type="text" formControlName="firstName">
    </div>
    <div>
        <label for="last-name">Last Name: </label>
        <input id="last-name" type="text" formControlName="lastName">
    </div>
    <div>
        <label for="last-name">Email ID: </label>
        <input id="last-name" type="text" formControlName="emailId">
    </div>
    <div>
        <label for="last-name">Mobile Number: </label>
        <input id="last-name" type="text" formControlName="mobileNumber">
    </div>
    <div formGroupName="address">
        <h2>Address
        <label for="street">Street: </label>
        <input id="street" type="text" formControlName="street">
        <label for="city">City: </label>
        <input id="city" type="text" formControlName="city">
        <label for="state">State: </label>
        <input id="state" type="text" formControlName="state">
        <label for="zip">Zip Code: </label>
        <input id="zip" type="text" formControlName="zip">
    </div>
    <div>
        <button type="submit" [disabled]="!userForm.valid">Submit</button>
    </div>
</form>
    

FormBuilder

FormBuilder API makes it easier to build reactive forms. Angular FormBuilder provides the functionality to add the FormGroup, nested FormGroup, FormArray & FormControls easily. It also allows us to set up the Validation rules for each of the controls.

Create a Nested Form

1. Need to import ReactiveFormsModule in the app.module.ts.
2. Need to import Component from '@angular/core' in the component.ts.
3. Need to import FormBuilder and FormControl from '@angular/forms' in the component.ts.
4. Need to initialize in constructorconstructor(private formBuilder: FormBuilder) {}

app.module.ts
    
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppRoutingModule } from './app-routing.module';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';

    @NgModule({
    
        imports: [
        // other imports ...
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule
        ],
    })
    export class AppModule {}

component.ts file 

    import { Component } from '@angular/core';
    import { FormBuilder, FormControl } from '@angular/forms';

    @Component({
    selector: 'app-form-builder-example',
    templateUrl: './form-builder-example.component.html',
    styleUrls: ['./form-builder-example.component.scss']
    })
    export class FormBuilderExampleComponent {
    constructor(private formBuilder: FormBuilder) {}

    userForm = this.formBuilder.group({
        firstName: new FormControl(''),
        lastName: new FormControl(''),
        emailId: new FormControl(''),
        mobileNumber: new FormControl(''),
        address: this.formBuilder.group({
            street: new FormControl(''),
            city: new FormControl(''),
            state: new FormControl(''),
            zip: new FormControl('')
        })
    });
    
  get firstname() {
    return this.userForm.get('firstname');
  }
 
  get lastname() {
    return this.userForm.get('lastname');
  }

  onSubmit(){
    console.log(this.userForm.value);
  }
}

component.html file 
    
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <div>
        <label for="first-name">First Name: </label>
        <input id="first-name" type="text" formControlName="firstName">
    </div>
    <div>
        <label for="last-name">Last Name: </label>
        <input id="last-name" type="text" formControlName="lastName">
    </div>
    <div>
        <label for="last-name">Email ID: </label>
        <input id="last-name" type="text" formControlName="emailId">
    </div>
    <div>
        <label for="last-name">Mobile Number: </label>
        <input id="last-name" type="text" formControlName="mobileNumber">
    </div>
    <div formGroupName="address">
        <h2>Address
        <label for="street">Street: </label>
        <input id="street" type="text" formControlName="street">
        <label for="city">City: </label>
        <input id="city" type="text" formControlName="city">
        <label for="state">State: </label>
        <input id="state" type="text" formControlName="state">
        <label for="zip">Zip Code: </label>
        <input id="zip" type="text" formControlName="zip">
    </div>
    <div>
        <button type="submit" [disabled]="!userForm.valid">Submit</button>
    </div>
</form>
    

Angular Form Validation

1. Need to import ReactiveFormsModule in the app.module.ts.
2. Need to import Component from '@angular/core' in the component.ts.
3. Need to import Validators, FormBuilder and FormControl from '@angular/forms' in the component.ts.
4. Need to initialize in constructorconstructor(private formBuilder: FormBuilder) {}

app.module.ts
    
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppRoutingModule } from './app-routing.module';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';

    @NgModule({
    
        imports: [
        // other imports ...
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule
        ],
    })
    export class AppModule {}

component.ts file 

import { Component } from '@angular/core';
import { FormBuilder, FormControl, Validators  } from '@angular/forms';

@Component({
selector: 'app-form-builder-example',
templateUrl: './form-builder-example.component.html',
styleUrls: ['./form-builder-example.component.scss']
})
export class FormBuilderExampleComponent {
    userForm : any;
    constructor(private formBuilder: FormBuilder) {
        this.userForm = this.formBuilder.group({
            firstname: ['', Validators.required],
            lastname: ['', [Validators.required, Validators.minLength(10)]],
            emailId: [Validators.required, Validators.email],
            mobileNumber: [Validators.required, Validators.minLength(10)],
            address: this.formBuilder.group({
                street: new FormControl(''),
                city: new FormControl(''),
                state: new FormControl(''),
                zip: new FormControl('')
            })
    });
} 
  
  onSubmit(){
    console.log(this.userForm.value);
    if (this.userForm.dirty && this.userForm.valid) {
      alert(
        `Name: ${this.userForm.value.name} Email: ${this.userForm.value.email}`
      );
    }
  
  }
}

component.html file 
    
    <div>
        <label for="firstname">First Name </label>
        <input type="text" id="firstname" name="firstname" formControlName="firstname">  
        <div class="alert alert-danger" *ngIf="firstname.touched && firstname.errors?.required">
            First Name Required.
        </div>
        
    </div>
     
    <div>
        <label for="lastname">Last Name </label>
        <input type="text" id="lastname" name="lastname" formControlName="lastname">
        <div class="alert alert-danger" *ngIf="lastname.touched && lastname.errors?.required">
            Last Name Required.
        </div>
        <div class="alert alert-danger" *ngIf="lastname.touched && lastname.errors?.minlength">
            Minimum 10 Character Required.
        </div>
    </div>

Angular Component Lifecycle / Lifecycle Hook Methods

Angular Lifecycle provides the functionality of input data change detection. Angular checks when data-bound properties change, and updates both the view and the component instance as needed.

Angular Components and Directives has same Lifecycle methods. Angular creates, updates, and destroys instances using lifecycle hook methods.

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. ngOnDestroy()

ngOnChanges()

The ngOnChanges() method runs whenever a parent component loads the child component or parent component change the @Input value of the child component. It runs before the ngOnInit(). If the component has @Input and @Input properties value change then Angular framework calls to the ngOnChanges() method.

This happens frequently, so any operation you perform here impacts performance significantly.

If component has no @Input or you use it without providing any @Input , the framework will not call to the ngOnChanges() method.

ngOnChanges() uses SimpleChanges as an argument.

---SimpleChanges Class---
class SimpleChanges{
    constructor(previousValue: any, currentValue: any, firstChange: boolean)
    previousValue: any;
    currentValue: any;
    firstChange: any;
    isFirstChane: any;
}

---Child Component TS file---
import { Component, Input, OnInit, OnChanges, SimpleChanges} from '@angular/core';
        
@Component({
    selector: 'app-onchanges',
    templateUrl: './onchanges.component.html',
    styleUrls: ['./onchanges.component.css']
})
export class OnChangesComponentExample implements OnInit, OnChanges {
    @Input() city = 'Mumbai';
    oldCity = 'Mumbai';
    diff = undefined;

    ngOnChanges(changes: SimpleChanges) {
        // This will only capture city changes as @Input uses
        console.log('Changes Detected. Is first change?', changes.rates.firstChange);
    }
}

---Child Component HTML---
City is {{city}}

---Parent Component TS file---
import { Component} from '@angular/core';
        
    @Component({
        selector: 'app-parent',
        templateUrl: './parent.component.html',
        styleUrls: ['./parent.component.css']
    })
    export class Parent implements{
        cityField = 'Mumbai';
    }

---Parent Component HTML---
<app-onchanges [city]=cityField>app-onchanges>
<input type="text" name="cityField" id="cityField" [(ngModel)]="cityField"/>

ngOnInit()

The ngOnInit() method called only once after the ngOnChanges() method. The purpose of the ngOnInit() method is to initialize the directive or component after Angular first displays the data-bound properties and sets the directive or component's input properties.

If you required to fetch data on the time of page loading, ngOnInit() is a good place for a component to fetch its initial data.

import { Component, OnInit } from '@angular/core';
        
@Component({
    selector: 'app-oninit',
    templateUrl: './oninit.component.html',
    styleUrls: ['./oninit.component.css']
})
export class OnInitComponentExample implements OnInit {

    ngOnInit() {
        // This method called only once 
        this.fetchDataFromDatabase();
    }
}

ngDoCheck()

The ngDoCheck() is called whenever any change detection occurs. Changes from either @Input or field value. whenever any change occurs, the ngDoCheck() method called immediately after ngOnChanges() and immediately after ngOnInit() on the first time.

The ngOnChanges() method called if we use @Input in the component or directive but ngDoCheck() is called whenever any change detection from either @Input or input field value.

import { Component, DoCheck, Input, OnChanges, SimpleChanges} from '@angular/core';
      
@Component({
    selector: 'app-docheck',
    templateUrl: './docheck.component.html',
    styleUrls: ['./docheck.component.css']
})
export class DoCheckCityComponent implements DoCheck, OnChanges {
    @Input() city = 'Mumbai';
    oldCity = 'Mumbai';
    diff = undefined;

    ngOnChanges(changes: SimpleChanges) {
        // This will only capture city changes as @Input uses
        console.log('Change detection. Is first change?', changes.rates.firstChange);
    }

    ngDoCheck() {
        // This will capture all changes (@Input or input fields both)
        if (this.city !== this.oldCity) {
            console.log("changes detected");
        }
    }
}

ngAfterContentInit()

The ngAfterContentInit() method runs only one time after the first ngDoCheck() method. This will not be executed after one time execution.

---Child Component TS file---
import { Component, DoCheck, Input, OnChanges, AfterContentInit, SimpleChanges} from '@angular/core';
  
@Component({
    selector: 'app-aftercontentinit',
    templateUrl: './aftercontentinit.component.html',
    styleUrls: ['./aftercontentinit.component.css']
})
export class AfterContentInitComponent implements DoCheck, OnChanges, AfterContentInit {
    @Input() city = 'Mumbai';
    oldCity = 'Mumbai';
    diff = undefined;

    ngOnChanges(changes: SimpleChanges) {
        // This will only capture city changes as @Input uses
        console.log('Is first change?', changes.rates.firstChange);
    }

    ngDoCheck() {
        // This will capture all changes (@Input or input fields both)
        if (this.city !== this.oldCity) {
            console.log("changes detected");
        }
    }

    ngAfterContentInit(){
        // This method runs once after the first ngDoCheck() method
        console.log("after content init");
    }
}