added reactive forms

todo-app/todo-app/src/app/todo/components/todo-item-details/todo-item-details.component.html

@@ -1,21 +1,25 @@
 <div class="d-flex justify-content-end">
     <a routerLink="/todo/list" class="btn btn-primary mr-5">Back</a>
 </div>
-<div *ngIf="todoItem; else loadingData">
+<div>
     <div class="d-flex justify-content-center">
-        <div class="form-wrapper">
-            <div>
-                <input [(ngModel)]="todoItem.name" class="form-control mb-2" placeholder="Task name"/>
-                <textarea [(ngModel)]="todoItem.description" class="form-control mb-2" placeholder="Description"></textarea>
-            </div>
+        <form [formGroup]="todoItemForm" class="form-wrapper d-flex flex-column">
+
+            <mat-form-field>
+                <mat-label>Task name</mat-label>
+                <input matInput formControlName="taskName" class="form-control mb-2" placeholder="Task name"/>
+            </mat-form-field>
+    
+            <mat-form-field>
+                <mat-label>Description</mat-label>
+                <textarea matInput formControlName="description" class="form-control mb-2" placeholder="Description"></textarea>
+            </mat-form-field>
+    
             <div>
                 <button (click)="onSave()" class="btn btn-primary mr-2">Save</button>
                 <button *ngIf="!todoItem.done && id" (click)="onDone()" class="btn btn-primary mr-2">Done</button>
                 <button *ngIf="id" (click)="onDelete()" class="btn btn-danger mr-2">Delete</button>
             </div>
-        </div>
+        </form>
     </div>
 </div>
-<ng-template #loadingData>
-    Loading data...
-</ng-template>

todo-app/todo-app/src/app/todo/components/todo-item-details/todo-item-details.component.ts

@@ -1,3 +1,4 @@
+import { FormGroup, FormControl } from '@angular/forms';
 import { TodoItemDetailsInterface } from './../../interfaces/todo-item-details.interface';
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { TodoListService } from './../../services/todo-list.service';
@@ -10,16 +11,26 @@ import { ActivatedRoute, Router } from '@angular/router';
 })
 export class TodoItemDetailsComponent implements OnInit {
   todoItem: TodoItemDetailsInterface;
+  todoItemForm: FormGroup;
+  id: number;
 
   constructor(private todoListService: TodoListService,
               private activatedRoute: ActivatedRoute,
               private router: Router) { }
 
   ngOnInit(): void {
-    const id = this.activatedRoute.snapshot.params['id'];
-    if (id) {
-      this.todoListService.getTodoItemById(id).subscribe(data => {
+    this.todoItemForm = new FormGroup({
+      taskName: new FormControl(''),
+      description: new FormControl('')
+    });
+    this.id = this.activatedRoute.snapshot.params['id'];
+    if (this.id) {
+      this.todoListService.getTodoItemById(this.id).subscribe(data => {
         this.todoItem = data;
+        this.todoItemForm = new FormGroup({
+          taskName: new FormControl(this.todoItem.name),
+          description: new FormControl(this.todoItem.description)
+        });
       });
     } else {
       this.todoItem = {
@@ -31,6 +42,8 @@ export class TodoItemDetailsComponent implements OnInit {
   }
 
   onSave(): void {
+    this.todoItem.name = this.todoItemForm.controls['taskName'].value;
+    this.todoItem.description = this.todoItemForm.controls['description'].value;
     if (this.todoItem.id) {
       this.todoListService.putTodoItem(this.todoItem).subscribe(() => {
         this.router.navigateByUrl('/todo/list');

todo-app/todo-app/src/app/todo/todo.module.ts

@@ -1,7 +1,8 @@
+import { MatInputModule } from '@angular/material/input';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TodoListComponent } from './components/todo-list/todo-list.component';
 import { TodoItemComponent } from './components/todo-item/todo-item.component';
 import { TodoItemDetailsComponent } from './components/todo-item-details/todo-item-details.component';
@@ -17,7 +18,9 @@ import { TodoRoutingModule } from './todo-routing.module';
     CommonModule,
     TodoRoutingModule,
     NgbModule,
-    FormsModule
+    FormsModule,
+    ReactiveFormsModule,
+    MatInputModule
   ]
 })
 export class TodoModule { }