angular - Angular2 Form Data Duplication? -


i'm pretty @ wit's end now, trying build application tracks hours timesheets, logic far works calculations seem right hours whatever reason form creating 2 objects when it's submitted , have absolutely 0 idea why.

here's gets outputted console on form submit, data's correct , lines what's in form it's duplicated, , have absolutely no idea why;

day-app.component.ts:44 object {date: "2016-08-08", starttime: "09:00", endtime: "17:30", client: "qwe", project: "qwe"…} day-app.component.ts:44 object {date: "2016-08-08", starttime: "09:00", endtime: "17:30", client: "qwe", project: "qwe"…} 

day.ts - object holding data each day logged

export class day {     id: number;     date: date;     starttime: date;     endtime: date;     hours: number;     client: string;     project: string;     task: string; } 

day.service.ts - class used store incoming data

import { injectable } '@angular/core'; import { day } './day';  @injectable() export class dayservice {      lastid: number = 0;      public days = [];      addday(day): void {         this.days.push(day);     } 

day-app.component.ts - component used render views , forms , send form data onto day service storage

import { component } '@angular/core'; import { dayservice } '../day.service'; import { day } '../day';  @component({     moduleid: module.id,     selector: 'app-day-app',     templateurl: 'day-app.component.html',     styleurls: ['day-app.component.css'],     providers: [dayservice], })  export class dayappcomponent {      constructor(private dayservice: dayservice) {     }    // can access methods dayservice;   // dayservice.method   // formservice.method      days() {         return this.dayservice.getalldays();     }      onsubmit(form): void {         let formdata = form;          let timestotal = (formdata.starttime-formdata.endtime*24);          let startdate = new date(date.parse(formdata.date + " " + formdata.starttime));         let enddate = new date(date.parse(formdata.date + " " + formdata.endtime));         let timediff = (((enddate.gettime()-startdate.gettime())/3600)/1000);          let newday = {             date : formdata.date,             starttime : formdata.starttime,             endtime : formdata.endtime,             client : formdata.client,             project : formdata.project,             hours : timediff         };          console.log(newday);         this.dayservice.addday(newday);       } } 

day-app.component.html

<form #f="ngform"             (ngsubmit)="onsubmit(f.value)"             class="form">             <div class='input-group'>                 <div class='row'>                     <div class='col-sm-12 col-md-12'>                         <div class='col-sm-6 col-md-6'>                             <label>date add</label>                                 <input type='date'                                  name='date'                                  placeholder='what date did work?'                                  class='form-control'                                  ngmodel />                              <br />                             <label>client</label>                                 <input type='text'                                  name='client'                                  placeholder='which client working for?'                                  class='form-control'                                  ngmodel />                             <br>                         </div>                         <div class='col-sm-6 col-md-6'>                             <div class='row'>                                 <div class='col-sm-6 col-md-6'>                                     <label>clocked in</label>                                         <input type='time'                                          name='starttime'                                          placeholder='punch in time'                                           class='form-control'                                          ngmodel />                                 </div>                                 <div class='col-sm-6 col-md-6'>                                     <label>clocked out</label>                                         <input type='time'                                          name='endtime'                                          placeholder='punch out time'                                           class='form-control'                                          ngmodel />                                 </div>                             </div>                                 <label>project</label>                                     <input type='text'                                      name='project'                                      placeholder='which project working on?'                                       class='form-control'                                      ngmodel />                         </div>                     </div>                     <hr />                 </div>             </div>             <br>             <input class='btn btn-sm btn-success' autofocus="" type='submit' value='add day' />         </form> 


Comments