Submit update form

• ✔️
  Submit form update

  Learn how to submit an update form in an Angular application.

Update the task with the TaskService

The TaskService service already includes a function to add a new task to the list. Let’s add a new function to update an existing task of the list.

🎓 Instructions

1. Update the src/app/task-service.ts file.

   import { Injectable } from '@angular/core';
   import { Task } from './task.model';
   
   @Injectable({
     providedIn: 'root'
   })
   export class TaskService {
       tasks: Task[] = [
           {
               title: 'Task 1',
               description: 'Description of task 1',
               createdAt: new Date()
           },
           {
               title: 'Task 2',
               description: 'Description of task 2',
               createdAt: new Date()
           }
       ];
   
       addTask(task: Task) {
           this.tasks.push({
               ...task,
               createdAt: new Date()
           });
       }
   
     getTask(id: string) {
       return this.tasks.find(task => task.id === id);
     }
   
   
     updateTask(task: Task) {
       const index = this.tasks.findIndex(t => t.id === task.id);
       this.tasks[index] = task;
     }
   }

Update the TaskFormComponent

The TaskFormComponent component is currently used to add a new task to the list.

Let’s handle the submission of the form to update and not create a new task. To do so, keep the same submit function but update it to use the updateTask function of the TaskService service.

When?

• If the task has an id, call the updateTask function.
• If the task doesn’t have an id, call the addTask function.

submit(task) {
    if (task.id) {
        this.taskService.updateTask(task);
    } else {
        this.taskService.addTask(task);
    }
    this.router.navigate(['/tasks']);
}

In both situations, navigate back to the list of tasks.

🎓 Instructions

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

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   import { TaskService } from '../task.service';
   import { Task } from '../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: ''
       };
   
     constructor(
       private route: ActivatedRoute,
       private taskService: TaskService
     ) {}
   
     ngOnInit() {
         const id = this.route.snapshot.paramMap.get('id');
         if (id) {
             this.task = this.taskService.getTask(id);
         }
     }
   
     submit(task) {
   
       if (task.id) {
           this.taskService.updateTask(task);
           } else {
           this.taskService.addTask(task);
       }
         this.router.navigate(['/tasks']);
     }
   }

Let’s test it out

1. Click on the ‘Update’ button next to a task in the list.
2. Update the form with the new task details.
3. Click on the ‘Update task’ button.
4. The task should be updated in the list.

✔️ What you learned

In this chapter, you learned how to update the TaskFormComponent to handle both updating and creating tasks.