Validacion nivel 2 Angular

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">

                        <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"  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="email"  id="email" name="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.email.errors.maxlength" class="alert alert-danger" role="alert">
                                     cantidad de caracteres excedido                           
                                 </div>
                                 <div *ngIf="form.controls.email.errors.pattern" class="alert alert-danger" role="alert">
                                      no se adminten otros caracteres                    
                                 </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" data-toggle="tooltip" placeholder="{{message}}"  data-placement="top"  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" (click) ="guardarContacto()" [disabled]="!form.valid" >Enviar</button>
                                <button class="btn btn-secondary" (click) ="limpiarformulario()">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 [routerLink]="['/empresa']">
                             

                                <h4 class="title">ART CODE STUDIOS<br/>
                                    <small>Desarrollo de videojuegos </small>
                                </h4>
                            </a>
                        </div>
                        <p class="description text-center"> Telefono: xxxxxxxx <br>
                            Email: xxxx@xxx.xas <br>
                            Ubicación:N.º xxxxxxxxxxxxxxxxxxxxxxxx
                        </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>