Skip to content
Angular Tutorials

Form Binding

Chapter Objectives

  • ✔️
    Binding your HTML form
    Learn how to bind a form to a variable in Angular.

Currently, the form input is possible. Now, you need to retrieve the form data to create a new task and add it to the existing list.

Angular Forms API

Angular provides 2 different APIs for working 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 view (HTML Template). Template-driven forms are easy to use and suitable for simple forms. On the Angular side, our goal is to bind each field to a property to get its current value.

TaskForm Type

You will create a new 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 will create a new one derived from the existing Task interface.

Choose the TypeScript Utility Type

The TypeScript utility type Pick allows you to create a new type by selecting certain properties from an existing type. The advantage of using the Pick utility type is that it helps you avoid duplicating properties from the existing type.

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

task.model.ts
export type TaskForm = Pick<Task, "title" | "description">;

🎓 Instructions

  1. Open the file src/app/models/task.model.ts.

  2. Add the following code below the existing one:

    task.model.ts
    export type TaskForm = Pick<Task, "title" | "description">;

  3. Import the forms functionality in Angular with the FormsModule

    app.module.ts
    import { NgModule } from "@angular/core";
    

    import { FormsModule } from "@angular/forms";
    

    @NgModule({
      declarations: [AppComponent, TaskListComponent, TaskFormComponent],
      imports: [BrowserModule, AppRoutingModule, NgbModule, FormsModule],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

  4. Modify the file src/app/task-form/task-form.component.ts.

    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 {
      task: TaskForm = {
        title: "",
        description: "",
      };
    }

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 this won’t be enough for your use case: it only allows you to bind the property value to the field, not update the variable based on user input.

Two-way Data Binding

To update your task variable when the form is updated, you need to use the [(ngModel)] format. This syntax allows us to:

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

Now, you need to bind the title input to the task.title property and the description textarea to the task.description property.

🎓 Instructions

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

  2. Replace the file content with the following code:

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">Submit</button>
</form>

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

✔️ What you have 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 model.

🔗 Resources