Understanding Forms in Angular – Part 1 Template-Driven Forms

In this short tutorial, you will learn about template-driven forms in angular.

This is what we’ll cover

1. About Template-Driven Forms
2. Build a Template-Driven Form
3. Display List on DropDown
4. Binding Form to Model
5. Pass date between Form and Model

1. About Template Driven Forms

Template-driven forms according to Angular documentation are suited for simple forms and maybe small applications as well.

There are three directives used for template-driven forms:

• NgModel – used to sync the form value with the data model
• NgForm – used for validation and other stuff
• NgModelGroup – binds FormGroup instance to DOM element

2. Build a Template Driven Form

Create a new Angular App. Add Bootstrap for styling (See how to do this)

Create a component. Name it StudentForm. We would place a template driven form on this component

The basic design of the form is given below:

<div class="container">
  <div class="formcontainer">
    <h1>Student Data</h1>
    <br>
  <form>
    <div class="form-group">
      <label>Name</label>
      <input class="form-control">
    </div>
    <div class="form-group">
      <label>Department</label>
      <input class="form-control">
    </div>
    <div class="form-group">
      <label>Country</label>
      <select class="form-control"></select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    |
    <button type="submit" class="btn btn-info">Reset</button>
  </form>
  </div>
</div>

Here’s the style for the formcontainer but you can improve it:

.formcontainer{
  width: 50%;
  background-color: floralwhite;
  padding: 25px;
  margin-top: 15px;
  border: 1px;
  border-style: solid;
  margin-left: auto;
  margin-right: auto;
}

3. Display List on Dropdown

Next we would populate the select list with a list of countries. To do that, we first create a list in the student-form.component.ts file like so.

  countries = ['India', 'USA', 'Nigeria', 'Hungary', 'Canada', 'France'];

Then adjust the select list markup to loop through the list and display each of them. You’ll use *ngFor like shown below:

<select class="form-control">
  <option *ngFor="let country of countries" value={{country}}>
    {{country}}
  </option>
</select>

At this point, you the list of countries would be displayed on the dropdownlist if your view the page.

4. Binding Template-driven form to Model

Now, we would like to display a record on the Form. To achieve this, you need to do is to create a class that would represent a Student. So the form would be used to fetch student data. You can create either as a separate Student.ts file or inside existing ts file. Let’s do a new file. This is shown below:

export class Student {
  constructor(
    public id: number,
    public name: string,
    public country: string,
    public department?: string
  ) {
  }
}

Next, create a new Student object. I call it model, like so:

  model = new Student(1,
    'Kindson Munonye',
    this.countries[2],
    'Computer Engineering'
  );

So, we now need to bind this record to the form.  To achieve that simple add the name and [(ngModel)] attributes to the form controls. For instance, the the name, we have:

name="department" [ngModel]="model.department"

5. Synchronising Data Between Form and Model

When the FormsModule was imported into the component, Angular attached the NgForm directive to the form tag. This is because, the template matches a selector in NgForm

So now to get access to the form data we need to add an attribute to the form tag. This would be a reference variable. Like so

 #studentForm = "ngForm"

Now, let’s see how to send the values in the form controls to the server. The current values in the form is the initial values, we would modify it and see what happen

So add a click event to the submit button:

(click)="send()"

Finally write the send method in the typescript file. In this method, simply use check the value of the model. You can  use console.log() as shown below:

  send() {
    console.log(this.model);
  }

So we can relaunch the application. Then click on submit to see what displays on the console. Change the text and resubmit. Any difference?

Now replace [ngModel] with [(ngModel)]. This is because, [ngModel] is for one-way binding while[(ngModel)] is for two way binding.

In the next part, we’ll look at Reactive Forms.