Form binding

• ✔️
  Bind your HTML form

  Learn how to bind a form to a variable in Angular.

You are able to fill out the form, but you need to get the data from the form to create a new task and add it to the existing list.

Angular Forms API

Angular provides 2 different API to work with forms:

• Template-driven forms
• Reactive forms

In this course, you will use the template-driven forms API to bind the form.

Template-driven forms

What does Template-driven mean?

The form structure and validations are defined in the HTML template. The template-driven forms are easy to use and suitable for simple forms. On Angular side, our focus is to bind each field to a property to retrieve its current value.

TaskForm type

Let’s create a TaskForm type to represent a task form. The TaskForm type will have two properties: title and description. Its shape is different from the Task interface you created earlier.You’ll create a new derivated one from the existing Task interface.

Pick TypeScript Utility type

The Pick utility type allows you to create a new type by picking some properties from an existing type. The benefit of using the Pick utility type is that it helps you to avoid duplicating the properties of the existing type.

You pass it the original type and the properties you want to pick.

task.model.ts

export type TaskForm = Pick<Task, 'title' | 'description'>;

🎓 Instructions

1. Open the src/app/task-form/task.model.ts file.

2. Add the following code below the existing interface:

   task.model.ts

   export type TaskForm = Pick<Task, 'title' | 'description'>;

3. Update the src/app/task-form/task-form.component.ts file.

   task-form.component.ts

   import { Component } from '@angular/core';
   
   import {TaskForm} from '../model/task.model';
   
   @Component({
     selector: 'app-task-form',
     templateUrl: './task-form.component.html',
     styleUrls: ['./task-form.component.css']
   })
   export class TaskFormComponent implements OnInit {
   
     task: TaskForm = {
       title: '',
       description: ''
     };
   
     ngOnInit() {}
   }

Form binding

To bind a form to your new task variable in Angular, you can use the [ngModel] directive. The [ngModel] directive is a built-in directive that allows you to bind a form input to a variable. But it won’t be enough for our usecase: it only allows us to bind the value of the property to the field, not to get the user input changes.

2 way data binding

To update our task variable when the form is updated, you need to use the [(ngModel)] format. Also called banana in a box syntax to remember how to write it, it allows us to:

• bind the value of the task to the form field
• to update the value of the task based on the user input

You want to bind the title input to the task.title property and the description textarea to the task.description property.

🎓 Instructions

1. Update the src/app/task-form/task-form.component.html file.

   task-form.component.html

   <form>
     <label for="title" class="form-label">Title</label>
   
     <input type="text" id="title" name="title" class="form-control" [(ngModel)]="task.title">
   
     <label for="description" class="form-label">Description</label>
   
     <textarea id="description" name="description" class="form-control" [(ngModel)]="task.description"></textarea>
   
     <button type="submit" class="btn btn-primary">Create task</button>
   </form>

By being bound to the form, the task variable will be updated when the form is updated.

✔️ What you learned

In this chapter, you learned how to bind a form to a variable in Angular. You learned how to create a task variable to represent a task. You also learned how to use the [(ngModel)] directive to bind a form input to a variable.