Formulario basico Angular 2 + Bootstrap

contacto.component.html

   <div class="col-md-8">
       <div class="card " [@carduserprofile]>
        <div class="container">
            <div class="row">

                <div class="col-md-8">
                    <h2 class="m-b-2">contacto</h2>


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

                        <div class="form-group row">
                            <label for="nombre" class="col-md-2 col-form-label">Nombre</label>

                            <div class="col-md-7">
                                <input class="form-control" type="text" id="nombre" name="nombre" placeholder="{{name}}" data-toggle="tooltip" data-placement="top" [(ngModel)]="contacto.nombre" required >
                            </div>
                        </div>


                        <div class="form-group row">
                            <label for="email" class="col-md-2 col-form-label">Email</label>

                            <div class="col-md-7">
                                <input class="form-control" type="text" id="email" name="email" placeholder="{{email}}" data-toggle="tooltip" data-placement="top" [(ngModel)]="contacto.email">
                            </div>
                        </div>


                        <div class="form-group row">
                            <label for="mensaje" class="col-md-2 col-form-label">Mensaje</label>

                            <div class="col-md-7">
                                <textarea class="form-control" rows="5" id="mensaje" name="mensaje" placeholder="{{message}}" data-toggle="tooltip" data-placement="top" title="Ingrese un mensaje" [(ngModel)]="contacto.mensaje"  ></textarea>

                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">Enviar</button>
                                <button type="reset" class="btn btn-secondary">Limpiar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
 </div>

contacto.component.ts

import {Component, OnInit,AfterViewInit,trigger,state,style,transition,animate,keyframes} from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import { FormsModule }   from '@angular/forms';
import {TiendaService} from  '../../services/tienda.service';
import { Contacto } from "../../model/contacto";   
@Component({
    moduleId: module.id,
    selector: 'contacto-cmp',
    templateUrl: 'contacto.component.html',
    providers: [TiendaService],
    animations: [
           trigger('cardprofile', [
            state('*', style({
                '-ms-transform': 'translate3D(0px, 0px, 0px)',
                '-webkit-transform': 'translate3D(0px, 0px, 0px)',
                '-moz-transform': 'translate3D(0px, 0px, 0px)',
                '-o-transform':'translate3D(0px, 0px, 0px)',
                transform:'translate3D(0px, 0px, 0px)',
                opacity: 1})),
                transition('void => *', [
                    style({opacity: 0,
                        '-ms-transform': 'translate3D(0px, 150px, 0px)',
                        '-webkit-transform': 'translate3D(0px, 150px, 0px)',
                        '-moz-transform': 'translate3D(0px, 150px, 0px)',
                        '-o-transform':'translate3D(0px, 150px, 0px)',
                        transform:'translate3D(0px, 150px, 0px)',
                    }),
                    animate('0.3s 0.25s ease-out')
                ])
            ]),
             trigger('carduserprofile', [
            state('*', style({
                '-ms-transform': 'translate3D(0px, 0px, 0px)',
                '-webkit-transform': 'translate3D(0px, 0px, 0px)',
                '-moz-transform': 'translate3D(0px, 0px, 0px)',
                '-o-transform':'translate3D(0px, 0px, 0px)',
                transform:'translate3D(0px, 0px, 0px)',
                opacity: 1
            })),
            transition('void => *', [
                style({opacity: 0,
                    '-ms-transform': 'translate3D(0px, 150px, 0px)',
                    '-webkit-transform': 'translate3D(0px, 150px, 0px)',
                    '-moz-transform': 'translate3D(0px, 150px, 0px)',
                    '-o-transform':'translate3D(0px, 150px, 0px)',
                    transform:'translate3D(0px, 150px, 0px)',
                }),
                animate('0.3s 0s ease-out'),
            ])
        ])
    ]
})

export class ContactoComponent implements OnInit{
  public title = "Contacto"; 
  public subtitle = "Estamos listos para ayudarte";
  public colmd8title = "llena tus datos";
  public contacto: Contacto; 
  public errorMessage: string;
  public status: string;
  public titulo = "crear contacto";

  public name = "Ingrese su nombre"; 
  public email = "Ingrese su email"; 
  public message = "Ingrese su mensaje"; 


    constructor(  
            private _route: ActivatedRoute,
            private _router: Router,
            private _tiendaService: TiendaService
    ){} 
    
    onSubmit(){
        this._tiendaService.addContracto(this.contacto).subscribe(
                    response => {
                        this.status = response.status;
                        if(this.status !== "success"){
                            alert("Error en el servidor");
                        }
                    },
                    error => {
                        this.errorMessage = <any>error;
                    
                        if(this.errorMessage !== null){
                            console.log(this.errorMessage);
                            alert("Error en la petición");
                        }
                    }
                );
               
    }

ngOnInit(){
    this.contacto = new Contacto(0,"","",""); 
}



 }