Learn Angular 4.0 In 10 Days - ngForms And ngContent - Day Six

Let us start day six of Learning Angular 4.0 in 10 Days Series. In the previous articles, we already discussed Pipes and ViewChild in Angular 4.0. If you want to read the previous articles of this series, do visit the below link.

• Learn Angular 4.0 in 10 Days - Day 1
• Learn Angular 4.0 in 10 Days - Component - Day 2
• Learn Angular 4.0 in 10 Days - Data Binding - Day 3
• Learn Angular 4.0 in 10 Days - Directives - Day 4
• Learn Angular 4.0 in 10 Days - Pipes & ViewChild - Day 5

Angular 4.0 Forms – What it IS?

In today's web applications, a large category of front-end applications is very much form dependent, especially in the case of large enterprise type development. Most of these applications contains simply a huge or large form which contains multiple tabs, dialogs and with non – trivial business validation logic. Forms are a very important of part of the applications. In a component-based application, we always want to split a form into small and reusable pieces of code which are stored within the Smart and Dumb components. These components are normally spread over the entire application which provides several architectural benefits, including flexibility and design changes.

In Angular 4.0 Framework, we have two different mechanisms related to form-binding.

1. Template Driven Form
2. Reactive or Model-Driven Forms

In this article, we will discuss the Template-Driven Forms.

Angular 4 tackles forms via the famous ngModel. The instantaneous two-way data binding of ng-model in Angular 1 is really a life-saver as it allows to transparently keep in sync a form with a view model. Forms built with this directive can only be tested in an end to end test because this requires the presence of a DOM, but still, this mechanism is very useful and simple to understand. Unlike the case of AngularJs 1.0, ngModel and other form-related directives are not available by default, we need to explicitly import them in our application module. For include the form module in our application, we need to inject the FormModule in our application and bootstrapped it.

Template Driven Forms Features

• Easy to use
• Suitable for simple scenarios and fails for complex scenarios
• Similar to angular 1.0
• Two-way data binding (using [(NgModel)] syntax)
• Minimal component code
• Automatic track of the form and its data
• Unit testing is another challenge

Advantages and Disadvantages of Template Driven Forms

In this simple example we cannot really see it, but keeping the template as the source of all form validation truth is something that can become pretty hairy rather quickly.

As we add more and more validator tags to a field or when we start adding complex cross-field validations the readability of the form decreases, to the point where it will be harder to hand it off to a web designer.

The upside of this way of handling forms is its simplicity, and it is probably more than enough to build a very large range of forms.

On the downside, the form validation logic cannot be unit tested. The only way to test this logic is to run an end to end test with a browser, for example using a headless browser like PhantomJs.

While using of directives in our templates gives us the power of rapid prototyping without too much boilerplate, we are restricted in what we can do. Reactive forms, on the other hand, let us define our form through the code and give us much more flexibility and control over data validation.

Advantages of Model Driven Forms

• UNIT TESTABLE
  Since we have the form model defined in our code, we can unit test it.

• LISTEN TO FORM AND CONTROLS CHANGES
  With reactive forms, we can listen to form or control changes easily. Each form group or form control exposes a few events which we can subscribe to (e.g. statusChanges, valuesChanges, etc).

To begin, we must first ensure we are working with the right directives and the right classes in order to take advantage of procedural forms. For this, we need to ensure that the ReactiveFormsModule was imported in the bootstrap phase of the application module. This will give us access to components, directives, and providers like FormBuilder, FormGroup, and FormControl.

Sample Code of app.component.formdemo1.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'form-demo-1',
    templateUrl: 'app.component.formdemo1.html'
})

export class FormDemo1Component implements OnInit {

    private formData: any = {};
    private showMessage: boolean = false;

    constructor() {
    }

    ngOnInit(): void {
    }

    registerUser(formdata: NgForm) {
        this.formData = formdata.value;
        this.showMessage = true;
    }
}

Sampse Code of app.component.formdemo1.html

<h2>Template Driven Form</h2>
<div>
    <form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
        <table style="width:60%;" cellpadding="5" cellspacing="5">
            <tr>
                <td style="width :40%;">
                    <label for="username">User Name</label>
                </td>
                <td style="width :60%;">
                    <input type="text" name="username" id="username" [(ngModel)]="username" required>
                </td>
            </tr>
            <tr>
                <td style="width :40%;">
                    <label for="email">Email</label>
                </td>
                <td style="width :60%;">
                    <input type="text" name="email" id="email" [(ngModel)]="email" required>
                </td>
            </tr>
            <tr>
                <td style="width :40%;">
                    <label for="password">Password</label>
                </td>
                <td style="width :60%;">
                    <input type="password" name="password" id="password" [(ngModel)]="password" required>
                </td>
            </tr>
            <tr>
                <td style="width :40%;"></td>
                <td style="width :60%;">
                    <button type="submit">Sign Up</button>
                </td>
            </tr>
        </table>
    </form>
    <div *ngIf="showMessage">
        <strong>Thanks You {{formData.username}} for registration</strong>
    </div>
</div>

Output

 

Form Control

Note that the FormControl class is assigned to similarly named fields, both on this and in the FormBuilder#group({ }) method. This is mostly for ease of access. By saving references to the FormControl instances on this, you can access the inputs in the template without having to reference the form itself. The form fields can otherwise be reached in the template by using loginForm.controls.username and loginForm.controls.password. Likewise, any instance of FormControl in this situation can access its parent group by using its .root property (e.g. username.root.controls.password). A FormControl requires two properties: an initial value and a list of validators. Right now, we have no validation.

Validating Reactive Forms

Building from the previous login form, we can quickly and easily add validation. Angular provides many validators out of the box. They can be imported along with the rest of dependencies for procedural forms. We are using .valid and .untouched to determine if we need to show errors - while the field is required, there is no reason to tell the user that the value is wrong if the field hasn't been visited yet. For built-in validation, we are calling .hasError() on the form element, and we are passing a string which represents the validator function we included. The error message only displays if this test returns true.

Reactive Forms Custom Validation

As useful as the built-in validators are, it is very useful to be able to include your own. Angular allows you to do just that, with minimal effort. A simple function takes the FormControl instance and returns null if everything is fine. If the test fails, it returns an object with an arbitrarily named property. The property name is what will be used for the .hasError() test.

<div [hidden]="!password.hasError('needsExclamation')">
  Your password must have an exclamation mark!
</div>

Sample  code of app.component.formdemo2.ts

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

@Component({
    moduleId: module.id,
    selector: 'form-demo-2',
    templateUrl: 'app.component.formdemo2.html'
})

export class FormDemo2Component implements OnInit {

    private formData: any = {};

    username = new FormControl('', [
        Validators.required,
        Validators.minLength(5)
    ]);

    password = new FormControl('', [
        Validators.required,
        hasExclamationMark
    ]);

    loginForm: FormGroup = this.builder.group({
        username: this.username,
        password: this.password
    });


    private showMessage: boolean = false;

    constructor(private builder: FormBuilder) {
    }

    ngOnInit(): void {
    }

    registerUser() {
        this.formData = this.loginForm.value;
        this.showMessage = true;
    }
}

function hasExclamationMark(input: FormControl) {
    const hasExclamation = input.value.indexOf('!') >= 0;

    return hasExclamation ? null : { needsExclamation: true };
}

Sample code of app.component.formdemo2.html

<h2>Reactive Form Module</h2>
<div>
    <form [formGroup]="loginForm" (ngSubmit)="registerUser()">
        <table style="width:60%;" cellpadding="5" cellspacing="5">
            <tr>
                <td style="width :40%;">
                    <label for="username">User Name</label>
                </td>
                <td style="width :60%;">
                    <input type="text" name="username" id="username" [formControl]="username">
                    <div [hidden]="username.valid || username.untouched">
                        <div>
                            The following problems have been found with the username:
                        </div>
                        <div [hidden]="!username.hasError('minlength')">
                            Username can not be shorter than 5 characters.
                        </div>
                        <div [hidden]="!username.hasError('required')">
                            Username is required.
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width :40%;">
                    <label for="password">Password</label>
                </td>
                <td style="width :60%;">
                    <input type="password" name="password" id="password" [formControl]="password">
                    <div [hidden]="password.valid || password.untouched">
                        <div>
                            The following problems have been found with the password:
                        </div>

                        <div [hidden]="!password.hasError('required')">
                            The password is required.
                        </div>
                        <div [hidden]="!password.hasError('needsExclamation')">
                            Your password must have an exclamation mark!
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width :40%;"></td>
                <td style="width :60%;">
                    <button type="submit" [disabled]="!loginForm.valid">Log In</button>
                </td>
            </tr>
        </table>
    </form>
    <div *ngIf="showMessage">
        <strong>Thanks You {{formData.username}} for registration</strong>
    </div>
</div>

Output 

 

Transclusion

In Angular 1.0, there is a concept of Transclusion. Actually, transclusion in an Angular 1.x represents the content replacement such as a text node or HTML and injecting it into a template at a specific entry time. The same thing in Angular 4.0 is totally forbidden. This is now done in Angular 4.0 through modern web APIs such as shadow DOM which is known as content projection.

What is Content Projection?

So now, we know what we are looking from an Angular 1.x perspective so that we can easily migrate the same in Angular 4.0. Actually, the projection is a very important concept in Angular. It enables the developers to develop or build reusable components and make the application more scalable and flexible.

In Web Components, we had the <content> element, which was recently deprecated, which acted as a Shadow DOM insertion point. Angular 4 allows Shadow DOM through the use of ViewEncapsulation. Early beta versions of Angular 4 adopted the <content> element, however, due to the nature of a bunch of Web Component helper elements being deprecated, it was changed to <ng-content>. Actually, View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies:

1. Emulated (default)
   styles from the main HTML propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only.
   
   
2. Native
   styles from the main HTML do not propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only.
   
   
3. None
   styles from the component propagate back to the main HTML and therefore are visible to all components on the page. Be careful with apps that have None and Native components in the application. All components with None encapsulation will have their styles duplicated in all components with Native encapsulation.

To illustrate ng-content that, suppose we have a children component,

@Component({
    selector: 'child',
    template: `
      <div>
        <h4>Child Component</h4>
        {{ _childInfo }}
      </div>
    `
})
export class ChildComponent {
  _childInfo = "Base Area";
}

What should we do if we want to replace {{_childInfo}} to any HTML that provided to ChildComponent? One tempting idea is to define an @Input containing the text, but what if you wanted to provide styled HTML or other components? Trying to handle this with an @Input can get messy quickly, and this is where content projection comes in. Components by default support projection, and you can use the ngContent directive to place the projected content in your template.

So, change ChildComponent to use projection:

import { Component } from '@angular/core';

@Component({
  selector: 'child',
  template: `
    <div style="border: 1px solid blue; padding: 1rem;">
      <h4>Child Component</h4>
      <ng-content></ng-content>
    </div>
  `
})
export class ChildComponent {
}

Then, when we use ChildComponent in the template:

<child>
    <p>My <i>dynamic</i> content.</p>
</child>

This is telling Angular, that for any markup that appears between the opening and closing tag of <child>, to place inside of <ng-content></ng-content>. When doing this, we can have other components, markup, etc projected here and the Child Component does not need to know about or care what is being provided.

But what if we have multiple <ng-content></ng-content> and want to specify the position of the projected content to certain ng-content? For example, for the previous ChildComponent, if we want to format the projected content into an extra area1 and area2 section. Then in the template, we can use directives, say, <area1> to specify the position of projected content to the ng-content with select="area1".

Sample Code of app.component.modal.html

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" [ngStyle]="{'display' : display }">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" (click)="fnClose()">×</button>
                <strong class="modal-title">{{header}}</strong>
            </div>
            <div class="modal-body">
                <ng-content select="content-body"></ng-content>
            </div>
            <div class="modal-footer">
                <ng-content select="content-footer"></ng-content>
            </div>
        </div>
    </div>
</div>

Sample Code of app.component.modal.ts

import { Component, OnInit, ViewChild, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'modal-window',
    templateUrl: 'app.component.modal.html'
})

export class ModalComponent implements OnInit {
    @Input() private display: string = 'none';
    @Input('header-caption') private header: string = 'Modal';

    constructor() {
    }

    ngOnInit(): void {
    }

    private fnClose(): void {
        this.display = 'none';
    }

    showModal(): void {
        this.display = 'block';
    }

    close(): void {
        this.fnClose();
    }

    setModalTitle(args: string): void {
        this.header = args;
    }
}

Sample Code of app.component.modaldemo.html

<div>
    <h2>Demonstrate Modal Window using ngContent</h2>
    <input type="button" value="Show Modal" class="btn-group" (click)="fnOpenModal()" />
    <br />
    <modal-window [header-caption]="caption" #modal>
        <content-body>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
        </content-body>
        <content-footer>
            <input type="button" class="btn-default active" class="btn btn-primary" value="Modal Close" (click)="fnHideModal();" />
        </content-footer>
    </modal-window>
</div>

Sample Code of app.component.modaldemo.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalComponent } from './app.component.modal';

@Component({
    moduleId: module.id,
    selector: 'parent-content',
    templateUrl: 'app.component.modaldemo.html'
})

export class ModalDemoComponent implements OnInit {

    private caption: string = 'Custom Modal';
    @ViewChild('modal') private _ctrlModal: ModalComponent;

    constructor() {
    }

    ngOnInit(): void {
    }

    private fnOpenModal(): void {
        this._ctrlModal.showModal();
    }

    private fnHideModal(): void {
        this._ctrlModal.close();
    }
}

Output 



<< Read Part 5 of this article here