pourquoi les valeurs de l'objet sont-elles mises à jour lors de la soumission

Question

Chaque fois qu'un utilisateur soumet le formulaire, les données relatives à cette tâche sont stockées dans un objet et cet objet est transmis dans un tableau contenant une liste de tâches.

Image to the console error

Maintenant lorsque vous vous connectez le tableau TasksList à la console. chaque tâche obtient la même valeur de "date". Les valeurs de toutes les instances d'une tâche sont remplacées. Je veux que l'objet ait des valeurs séparées de "date" pour chaque personne.

// composante app

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms'; 
import { ITaskDetails } from './interfaces/task-details'; 
import { TaskService } from './services/task.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    currentDate: {}; 
    taskForm: FormGroup; 
    taskArr: ITaskDetails[]; 
    taskObj: ITaskDetails = { 
    title: '', 
    description: '', 
    date: null 
    }; 

    constructor(private taskSer: TaskService) { 
    this.currentDate = new Date().toISOString().substring(0, 10); 
    } 
    ngOnInit() { 
    this.taskForm = new FormGroup({ 
     'taskTitle': new FormControl(''), 
     'description': new FormControl(''), 
     'date': new FormControl(this.currentDate) 
    }); 
    console.log(this.taskForm); 
    } 

    onSubmit() { 
    this.taskObj.title = this.taskForm.get('taskTitle').value; 
    this.taskObj.description = this.taskForm.get('description').value; 
    this.taskObj.date = this.taskForm.get('date').value; 

    console.log(this.taskObj); 

    this.taskSer.setData({...this.taskObj}); 
    this.taskArr = this.taskSer.getdata(); 
    console.log(this.taskArr); 
    } 
} 

// Task Service

import { Injectable } from '@angular/core'; 
import { ITaskDetails } from '../interfaces/task-details'; 

@Injectable() 
export class TaskService { 
    taskArr: ITaskDetails[] = []; 
    taskDetails = { 
    title: '', 
    description: '', 
    date: null 
    }; 

    setData(obj: ITaskDetails) { 
    this.taskDetails.title = obj.title; 
    this.taskDetails.description = obj.description; 
    this.taskDetails.date = obj.date; 
    this.taskArr.push(this.taskDetails); 
    } 
    getdata() { 
    return this.taskArr; 
    } 
    constructor() { } 

} 

// modèle de formulaire

<section class="container"> 
    <div class="panel panel-default"> 
    <div class="panel-heading">Add a Task</div> 
    <div class="panel-body"> 
     <form class="form-horizontal" [formGroup]="taskForm" (ngSubmit)="onSubmit()"> 
     <div class="form-group"> 
      <label for="title" class="col-sm-2 control-label">Title *</label> 
      <div class="col-sm-10"> 
      <input type="text" class="form-control" id="taskTitle" placeholder="Title of Task" formControlName="taskTitle"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="description" class="col-sm-2 control-label">Description *</label> 
      <div class="col-sm-10"> 
      <input type="text" class="form-control" id="description" placeholder="Enter Your Description" formControlName="description"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="date" class="col-sm-2 control-label">Date of Completion *</label> 
      <div class="col-sm-10"> 
      <input type="date" class="form-control" id="date" formControlName="date"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-6"> 
      <button type="submit" class="btn btn-default" [disabled]="!taskForm.valid">Submit your data</button> 
      </div> 
     </div> 
     </form> 
    </div> 
    </div> 
</section> 
<section class="container"> 
    <app-task-list></app-task-list> 
</section> 

Answer 1

vous devez étendre votre taskDetails objet dans votre méthode de service comme celui-ci

setData(obj: ITaskDetails) { 
    this.taskDetails.title = obj.title; 
    this.taskDetails.description = obj.description; 
    this.taskDetails.date = obj.date; 
    this.taskArr.push({...this.taskDetails}); <<<<<this 
} 

pas lorsque vous appelez la méthode et transmettez l'objet. Retirez la forme d'objet étalé

onSubmit() { 
    this.taskObj.title = this.taskForm.get('taskTitle').value; 
    this.taskObj.description = this.taskForm.get('description').value; 
    this.taskObj.date = this.taskForm.get('date').value; 

    console.log(this.taskObj); 

    this.taskSer.setData({...this.taskObj}); <<<<this to setData(this.taskObj); 
    this.taskArr = this.taskSer.getdata(); 
    console.log(this.taskArr); 
} 

Answer 2

Je vois une certaine largeur "étrange" this.taskObj.title = this.taskForm.get ('taskTitle'). value;

utilisation

this.taskObj.title = this.taskForm.value.taskTitle; 
this.taskObj.title = this.taskForm.value.taskTitle; 
this.taskObj.description = this.taskForm.value.description; 
this.taskObj.date = this.taskForm.value.date; 

ou, mieux,

//change the submit as 
<form class="form-horizontal" [formGroup]="taskForm" (ngSubmit)="onSubmit(taskForm)"> 

//And in the onSubmit 
onSubmit(dataForm: FormGroup) { 
    if (dataForm.isValid) 
    { 
    this.taskObj.title = dataForm.value.taskTitle; 
    .... 
    } 
} 

Quoi qu'il en soit, vérifiez dans votre service

setData(obj: ITaskDetails) { 
    console.log(obj); //<--this 
    ... 
}