added reactive forms
This commit is contained in:
parent
afe40a8fea
commit
da9beb1a6d
@ -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 class="d-flex justify-content-center">
|
|
||||||
<div class="form-wrapper">
|
|
||||||
<div>
|
<div>
|
||||||
<input [(ngModel)]="todoItem.name" class="form-control mb-2" placeholder="Task name"/>
|
<div class="d-flex justify-content-center">
|
||||||
<textarea [(ngModel)]="todoItem.description" class="form-control mb-2" placeholder="Description"></textarea>
|
<form [formGroup]="todoItemForm" class="form-wrapper d-flex flex-column">
|
||||||
</div>
|
|
||||||
|
<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>
|
<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>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<ng-template #loadingData>
|
|
||||||
Loading data...
|
|
||||||
</ng-template>
|
|
||||||
|
@ -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');
|
||||||
|
@ -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 { }
|
||||||
|
Loading…
Reference in New Issue
Block a user