Formulario Rractivo Angular 2

contacto.component.html

      <div class="texto-encabezado text-xs-center">
            <div class="container">
                <h1 class="display-4 wow bounceIn">{{title}}</h1>
                <p class="wow bounceIn" data-wow-delay=".3s">{{subtitle}}</p>

            </div>

        </div>
   
   
   <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 id="form_contacto" [formGroup]="form" (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"  formControlName="nombre">
							
                            </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"  formControlName="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" formControlName="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>

 <div class="col-md-4">
                <div class="card card-user" [@cardprofile]>
                    <div class="image">
                     
                    </div>
                    <div class="content">
                        <div class="author">
                            <a href="#">
                             

                                <h4 class="title">XAS Dynamics<br/>
                                    <small>Autonomous Systems</small>
                                </h4>
                            </a>
                        </div>
                        <p class="description text-center"> Telephone: 22446611 <br>
                            Email: [email protected] <br>
                            Ubication:N.º 179, Calle La Reforma, San Salvador
                        </p>
                    </div>
                    <hr>
                    <div class="text-center">
                        <button href="https://www.facebook.com/ArtCodeStudios/" class="btn btn-facebook"><i class="fa fa-facebook-square"></i></button>
                        <button href="" class="btn btn-simple"><i class="fa fa-twitter"></i></button>
                        <button href="" class="btn btn-simple"><i class="fa fa-google-plus-square"></i></button>
                    </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 { TiendaService} from  '../../services/tienda.service';
import { Contacto } from "../../model/contacto";   
import { SweetAlertService } from 'ng2-sweetalert2';
import { FormGroup, FormBuilder, Validators  } from '@angular/forms';
@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"; 

  form: FormGroup;


    constructor(  
            private _route: ActivatedRoute,
            private _router: Router,
            private _tiendaService: TiendaService,
            private fb: FormBuilder
    ){ this.crearControles();} 
    
    onSubmit(){
        this._tiendaService.addContracto(this.form.value).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,"","",""); 
}

crearControles(){
this.form = this.fb.group({
  nombre:'',
  email:'',
  mensaje:''
})

}


 }

tienda.service.ts

import {Injectable} from "@angular/core";
import { Http, Response, Headers } from '@angular/http';
import "rxjs/add/operator/map";
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Observable';
import {Tienda} from '../model/tienda';
import {Contacto} from '../model/contacto';
@Injectable()
export class TiendaService{
 constructor(private _http: Http){}

// Shopping information Store
 getTiendas(){
     return this._http.get("http://localhost/slim/tienda-linea.php/producto")
     .map(res => res.json());         
 }


//  Contact area information 
 getContactos(){
     return this._http.get("http://localhost/slim/tienda-linea.php/contacto")
     .map(res => res.json());         
 }


	addContracto(contacto: Contacto) {
		let json = JSON.stringify(contacto);
		let params = "json="+json;
		let headers = new Headers({'Content-Type':'application/x-www-form-urlencoded'});

		return this._http.post("http://localhost/slim/tienda-linea.php/add-contacto", 
				params, {headers: headers})
				.map(res => res.json())
				.catch(this.handleError);
	}

protected handleError (error: Response | any) {
      // In a real world app, you might use a remote logging infrastructure
      let errMsg: string;
      if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
      } else {
        errMsg = error.message ? error.message : error.toString();
      }
      console.error(errMsg);
      return Observable.throw(errMsg);
    }



}