Angular2 ++ Validator

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" novalidate [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 *ngIf="form.controls.nombre.errors && form.controls.nombre.touched"> 
                                 <div *ngIf="form.controls.nombre.errors.required" class="alert alert-danger" role="alert">
                                     El campo es requerido                           
                                 </div>
                                  <div *ngIf="form.controls.mensaje.errors.maxlength" class="alert alert-danger" role="alert">
                                     cantidad de caracteres excedido                           
                                 </div>
                                </div>
                            </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 *ngIf="form.controls.email.errors && form.controls.email.touched"> 
                                 <div *ngIf="form.controls.email.errors.required"  class="alert alert-danger" role="alert" >
                                     El campo es requerido                           
                                 </div>
                                 <div *ngIf="form.controls.mensaje.errors.maxlength" class="alert alert-danger" role="alert">
                                     cantidad de caracteres excedido                           
                                 </div>
                                </div>
                            </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 *ngIf="form.controls.mensaje.errors && form.controls.mensaje.touched"> 
                                 <div *ngIf="form.controls.mensaje.errors.required" class="alert alert-danger" role="alert">
                                     El campo es requerido                           
                                 </div>
                                 <div *ngIf="form.controls.mensaje.errors.maxlength" class="alert alert-danger" role="alert">
                                     cantidad de caracteres excedido                           
                                 </div>
                                </div>
                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit"  class="btn btn-primary" [disabled]="!form.valid">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:['', Validators.compose([
      Validators.required,
      Validators.maxLength(46)
  ])],
  email:['',Validators.compose([
     Validators.required,
     Validators.maxLength(46)
  ])],
  mensaje:['', Validators.compose([
      Validators.required,
      Validators.maxLength(150)
  ])]
})

}


 }

productos.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { MODULE_COMPONENTS, MODULE_ROUTES } from './productos.routes';
import { ReactiveFormsModule }   from '@angular/forms';
import { FormsModule }   from '@angular/forms';
import { CommonModule } from '@angular/common';

@NgModule({
    imports: [
        BrowserModule, /// el que causo una perdita de 8 horas de desarrollo
        FormsModule, // variable de entorno para ingresar datos con ngform
        ReactiveFormsModule, /// variable para la variable ["formgroup"]
        CommonModule,
        RouterModule.forChild(MODULE_ROUTES)
    ],
    declarations: [ MODULE_COMPONENTS ]
})

export class ProductosModule{}