TypeError: Невозможно прочитать имя свойства неопределенного TypeError: Невозможно прочитать имя свойства неопределенного

Я работаю с AngularJS и ядром .net. Обычно идея заключается в том, что с угловым я представляю данные и вызываю WebAPI из ядра .net. Представление данных не проблема, для публикации данных в настоящее время я не закончил, потому что у меня проблема с отображением формы, откуда я должен публиковать.

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './components/app/app.component'
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { SpareTypeListComponent } from './components/spareType/spare-type-list/spare-type-list.component';
import { SpareTypeSummaryComponent } from './components/spareType/spare-type-summary/spare-type-summary.component';
import { SpareTypeService } from "./components/shared/spare-type.service";
import { SpareTypeFormComponent } from './components/spareType/spare-type-form/spare-type-form.component';



export const sharedConfig: NgModule = {
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent,
        SpareTypeListComponent,
        SpareTypeSummaryComponent,
        SpareTypeFormComponent
    ],
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'spares', component: SpareTypeListComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [ SpareTypeService ]
};

запасной тип-form.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { SpareType } from "../../shared/spare-type.type";
import { SpareTypeService } from '../../shared/spare-type.service';

@Component({
    selector: 'spare-form',
    templateUrl: './spare-type-form.component.html'

})

export class SpareTypeFormComponent implements OnInit {

    @Input() spareType: SpareType

    constructor(private spareTypeService: SpareTypeService) { }

    ngOnInit() {

    }

    onSubmit() {

    }
}

запасной тип-form.component.html

<form (ngSubmit)="onSubmit()" #spareTypeForm="ngForm">

        <label for="name">Name:</label>
        <input type="text" class="form-control" name="name" [(ngModel)]="spareType.name" required #name="ngModel" />
        <br />
        <button type="submit" class="btn btn-success btn-lg">Add</button>
</form>

Я следую этому примеру: https://github.com/Vintharas/angular2-step-by-step-05-forms-and-validation/tree/master/src/app/person-details

Где он инициализирует пустой объект?

Родительский компонент

import { Component, OnInit, Input} from '@angular/core';
import { SpareType } from '../../shared/spare-type.type';
import { SpareTypeService } from "../../shared/spare-type.service";

список запасных типов.component.ts

@Component({
    selector: 'spare-type-list',
    templateUrl: './spare-type-list.component.html',
    providers: [SpareTypeService]

})

export class SpareTypeListComponent implements OnInit {


    @Input() spareType: SpareType;

    spareTypes: SpareType[];

    constructor(private spareTypeService: SpareTypeService ) {

    }

    ngOnInit() {
        this.spareTypeService.getSpareTypes()
            .then(types => this.spareTypes = types);
    }
}

список запасных типов.component.html

<spare-form></spare-form>
<h1>Spare Types List</h1>
<p *ngIf="!spareTypes">No Spare Types Found.</p>
<spare-type-summary *ngFor="let spareType of spareTypes" [spareType]="spareType"></spare-type-summary>

Отображение данных из базы данных работает, только у меня проблема с формой.