Angular2 Form Data Duplication? - forms

Question

I'm pretty much at wit's end with this now, Trying to build an application that tracks hours for timesheets, The logic so far all works all the calculations seem right for hours but for whatever reason the form is creating 2 objects when it's submitted and i have absolutely zero idea why.
Here's what gets outputted to console on form submit, The data's all correct and lines up with what's in the form but it's duplicated, and i 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 for holding the data for 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 - The class used to store incoming data
import { Injectable } from '#angular/core';
import { Day } from './day';
#Injectable()
export class DayService {
lastId: number = 0;
public days = [];
addDay(day): void {
this.days.push(day);
}
Day-app.component.ts - The component used to render the views and forms and send form data onto the Day Service for storage
import { Component } from '#angular/core';
import { DayService } from '../day.service';
import { Day } from '../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 from DayService;
// dayService.method
// formService.method
get 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 to add</label>
<input type='date'
name='date'
placeholder='What date did you work?'
class='form-control'
ngModel />
<br />
<label>Client</label>
<input type='text'
name='client'
placeholder='Which client were you 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 were you 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>