ejercicios de reactive forms resueltos.

src/app/app.component.html

@@ -4,27 +4,3 @@
 <div class="container">
   <app-todo></app-todo>
 </div>
-
-<br>
-<br>
-<div>
-  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
-  <label>
-    First Name:
-    <input type="text" formControlName="firstName">
-  </label>
-  <label>
-    Last Name:
-    <input type="text" formControlName="lastName">
-  </label>
-  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
-  <button type="button" (click)="initialize()" >Reset</button>
-</form>
-<div>
-  <div>
-    Valido {{profileForm.valid}}
-
-  </div>
-  Touched {{profileForm.touched}}
-</div>
-</div>

src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { FormGroup, FormControl, Form, Validators, AbstractControl } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
@@ -8,25 +7,4 @@ import { FormGroup, FormControl, Form, Validators, AbstractControl } from '@angu
 })
 export class AppComponent {
   title = 'Todo';
-  profileForm = new FormGroup({
-    firstName: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-    lastName: new FormControl('', [Validators.required, StartsWithAValidator]),
-  })
-    constructor () {
-      this.profileForm.valueChanges.subscribe(value => console.log(value));
-    }
-
-  onSubmit() {
-    console.log(this.profileForm.value);
-  }
-  initialize() {
-    this.profileForm.reset()
-  }  
 }
-
-export function StartsWithAValidator(control: AbstractControl) {
-  if (!control.value.startsWith('A')) {
-    return { startsWithA: true };
-  }
-  return null;
-}

src/app/model/todo-item.ts

@@ -2,6 +2,7 @@ export class TodoItem {
   id: number;
   description: string;
   isCompleted: boolean = false;
+  url:string
 
   toggleCompleted() {
     this.isCompleted = !this.isCompleted;

src/app/stats/stats.component.html

@@ -1,6 +1,6 @@
-<div
-    class="progressbar"
-    [ngStyle]="{width: completedPercentage() + '%'}"
->
-{{completedPercentage()}} %
-</div>
+<div class="progress">
+    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
+        [ngStyle]="{'width': completedPercentage()}">
+        {{completedPercentage()}}
+    </div>
+</div>

src/app/stats/stats.component.scss

@@ -3,4 +3,6 @@
     height: 50px;
     font-size: x-large;
     transition: width 0.3s;
+
+
 }

src/app/stats/stats.component.ts

@@ -15,6 +15,8 @@ export class StatsComponent implements OnInit {
   ngOnInit(): void {
   }
   completedPercentage() {
-    return Math.round(this.service.completedSize() /  this.service.list.length * 100) || 0
+    let percentaje = Math.round(this.service.completedSize() /  this.service.list.length * 100) || 0
+    return percentaje + '%' 
   }
+
 }

src/app/todo-app/todo-app.component.html

@@ -1,12 +1,16 @@
-<app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
-<app-todo-list
-  [list]="getList()"
+<app-todo-form (add)="onTodoItemCreated($event)"
+[editingTask] = "editingTask"
+[isEditingTask] = "isEditingTask"
+(cancelEditing) = "onCancelEditingTask()">
+</app-todo-form>
+
+<app-todo-list [list]="getList()" 
   (itemRemoved)="onTodoItemRemoved($event)"
   (itemStateChanged)="onItemStateChanged($event)"
->
+  (itemEdited) = "onItemEditing($event)"
+  >
 </app-todo-list>
-<app-todo-footer
-  [list]="getList()"
->
-</app-todo-footer>
+
+<app-todo-footer [list]="getList()"></app-todo-footer>
+
 <app-stats></app-stats>

src/app/todo-app/todo-app.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import {TodoItem} from '../model/todo-item';
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { TodoItem } from '../model/todo-item';
 import { element } from 'protractor';
 import { TodoService } from '../todo.service';
 /** */
@@ -8,11 +8,11 @@ import { TodoService } from '../todo.service';
   templateUrl: './todo-app.component.html',
   styleUrls: ['./todo-app.component.scss'],
 })
-export class TodoAppComponent  {
+export class TodoAppComponent {
+  editingTask = undefined;
+  isEditingTask = false;
 
-  constructor(
-    private service: TodoService
-  ) {}
+  constructor(private service: TodoService) {}
 
   getList() {
     return this.service.list;
@@ -24,6 +24,14 @@ export class TodoAppComponent  {
     item.toggleCompleted();
   }
   onTodoItemCreated(task) {
-    this.service.add(task)
+    this.service.add(task);
   }
+  onItemEditing(task){
+    this.editingTask = task;
+    this.isEditingTask = true;
+  }
+  onCancelEditingTask(){
+    this.isEditingTask = false;
+  }
+
 }

src/app/todo-form/todo-form.component.html

@@ -1,10 +1,22 @@
+<form class="task-main-form" [formGroup]="taskForm">
 
-<input type="text" #taskDescription class="add-todo">
+  <h5>Task</h5>
+  <div class="main-row">
 
-<button
-  class="btn btn-primary"
-  (click)="save(taskDescription)">
-  Create
-</button>
+    <input type="text" class="add-todo" formControlName="taskName" value="{{taskForm.controls.taskName.value}}">
 
+    <button *ngIf="!isEditingTask" class="btn btn-primary" (click)="save()" [disabled]="!taskForm.valid">Create</button>
 
+    <!-- only on 'editing mode'-->
+    <button *ngIf="isEditingTask" class="btn btn-primary" (click)="edit()" [disabled]="!taskForm.valid">Edit </button>
+    <button *ngIf="isEditingTask" class="btn btn-secondary" (click)="cancelEdit()">Cancel</button>
+  </div>
+
+
+  <h5>Optional:</h5>
+  <div class="optional-row">
+    <p>URL:</p>
+    <input type="text" class="add-todo" formControlName="taskUrl" value="{{taskForm.controls.taskUrl.value}}">
+  </div>
+
+</form>

src/app/todo-form/todo-form.component.scss

@@ -1,3 +1,35 @@
+.task-main-form {
+  background-color: rgb(70, 162, 255);
+  padding: 20px;
+  border-radius: 15px;
+}
+
 .add-todo {
-  width: 80%
+  width: 100%;
+}
+.main-row{
+  display: flex;
+  justify-content: stretch;
+}
+
+.optional-row{
+  display: flex;
+  justify-content: stretch;
+}
+
+.optional-row p{
+  display: inline-block;
+  padding: 0px 10px;
+}
+
+.optional-row .add-todo{
+  width: 100%;
+}
+
+input.ng-invalid{
+  border: 2px solid red;
 }
+
+.btn{
+  margin: 0px 0px 0px 10px;
+}