Basic Angular Form Design Using Template Driven Method

It’s been a long time since I wrote articles. Well, in the future, I will share my knowledge with you. This time, I will be sharing articles on Angular since I have started to learn it from scratch. Let's begin.

 

When a user or a community needs to gather some information from the user/s, forms ware is considered the most effective way of achieving this. It provides an interface where a user can fill all the required details and validate the information before submitting the data. In Angular, we have two different ways of creating forms - Template Driven Forms and Reactive Forms.

 

In this article, we shall take a look at the process of creating Template-Driven forms and their implementation in Angular. So, let's start!

 

Create a new Angular Project

 

Open the terminal using either Command Prompt or Visual Studio Code terminal and follow the given steps for creating a new project. 

 

First, create a project named "validation" using the following command. 

 

ng new validation

 

 

Now, after creating a new Angular project, we can move forward to a practical demo and create template-Driven forms for implementation step by step.

 

Execute this command for adding bootstrap to your project so that the forms can be responsive to devices we are using.

 

npm install bootstrap

 

 

Implementation of Template-Driven Forms

 

After installing bootstrap, we can use the bootstrap classes. So, open styles.css and add the following code which is responsible for importing bootstrap CSS from installed node packages.

 

@import "node_modules/bootstrap/dist/css/bootstrap.min.css";

 

Coming to Angular 8, we don’t need to add the module which is essential for providing all the required components that are created in a template-driven method, such as adding Forms Module in the app.module.ts using Angular previous versions.

 

Next, we need to create a child component and name the component as "child". This is where we will be creating a form with that. For adding a new component, change the directory to the app folder in terminal and execute the command as follows.

 

ng g c child

 

 

Then, let us create a simple form in which a user can enter their details. So, add the code inside ‘child.component.html'.

<div class="row">
    <div class="col-md-8" style="margin-top: 30px;

border: 5px solid powderblue; padding: 50px;">
        <form class="form-horizontal" role="form">
            <fieldset>
                <strong>Basic Design Template Driven Form </strong>
                <div class="form-group">
                    <label class="col-sm-5 control-label" for="textinput">FirstName</label>
                    <div class="col-sm-8">
                        <input type="text" name="FirstName" placeholder="Enter FirstName" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-5 control-label" for="textinput">LastName</label>
                        <div class="col-sm-8">
                            <input type="text" name="LastName" placeholder="Enter LastName" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label" for="textinput">Address</label>
                            <div class="col-sm-8">
                                <input type="text" name="Address" placeholder="Enter Address" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-5 control-label" for="textinput">City</label>
                                <div class="col-sm-8">
                                    <input type="text" name="city" placeholder="Enter City Name" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-5 control-label" for="textinput">State</label>
                                    <div class="col-sm-4">
                                        <input type="text" name="state" placeholder="State" class="form-control">
                                        </div>
                                        <label class="col-sm-5 control-label" for="textinput">Postcode</label>
                                        <div class="col-sm-4">
                                            <input type="text" name="postcode" placeholder="Enter Post Code" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-5 control-label" for="textinput">Gender</label>
                                            <div class="col-sm-8">
                                                <select class="form-control" name="Gender">
                                                    <option>---Select---</option>
                                                    <option *ngFor="let item of GenderData" [value]="item">

{{item}}

</option>
                                                </select>
                                            </div>
                                        </div>
                                        <br>
                                            <div class="form-group">
                                                <div class="col-sm-offset-5 col-sm-8">
                                                    <div class="button">
                                                        <button type="submit"> Save</button>
                                                        <button type="reset">Reset</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>

 

 

In the above child-component.html, the form is a simple form and before converting the above simple form into Template Driven Forms, we will be creating a Model as following.

export interface address check {
    FirstName: string,
    LastName: string,
    address: string,
    city: string,
    state: string,
    postcode: number,
    Gender: any[],
}

Now, let us modify the 'child.component.ts' file. Here, we first construct the data for the Gender drop-down and construct a model with a type of default values.

GenderData: any[] = ['Male’, ‘Female'];
check = {
        FirstName: '',
        LastName: '',
        address: '',
        city: '',
        state: '',
        postcode: null,
        Gender: null,

 

So, we have built a simple Template Driven Form. Let’s run the project and see the output. For that, switch to the terminal and execute this command to view the output in the browser.

 

ng serve --open

 

 

 

I hope this article will be useful to you. Please put your feedback in the comments section which helps me to improve for the next article. If you have any query, feel free to ask.

 

Thank You!!!