s329416/todo-app-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added reactive forms

Browse Source
This commit is contained in:
JakubWalkowiak 2022-02-08 23:53:26 +01:00
parent afe40a8fea
commit da9beb1a6d
3 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
todo-app/todo-app/src/app/todo/components/todo-item-details/todo-item-details.component.html
View File

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

19
todo-app/todo-app/src/app/todo/components/todo-item-details/todo-item-details.component.ts
View File

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

7
todo-app/todo-app/src/app/todo/todo.module.ts
View File

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