<style>
    .ng-valid[required] {
        border-left: 5px solid #42A948; /* green */
    }

    .ng-invalid {
        border-left: 5px solid #a94442; /* red */
    }
</style>

<div class="row">
    <div class="col-md-6 col-md-offset-2 col-xs-12 col-xs-offset-0">
        <form #myForm="ngForm" (ngSubmit)="save.emit(contact)">
            <div class="form-group">
                <label for="name">NAME</label>
                <input type="text" [(ngModel)]="contact.name" ngControl="name" #name="ngForm" class="form-control" placeholder="NAME" required/>
                <div class="alert alert-danger" [hidden]="name.valid">Name is required</div>
            </div>
             <div class="form-group">
                <label for="email">EMAIL</label>
                <input type="email" [(ngModel)]="contact.email" ngControl="email" #email="ngForm" class="form-control" placeholder="EMAIL" required/>
                  <div class="alert alert-danger" [hidden]="email.valid">Email is required</div>
            </div>
             <div class="form-group">
                <label for="phone">PHONE</label>
               <input type="tel" [(ngModel)]="contact.phone" ngControl="phone" #phone="ngForm" class="form-control" placeholder="PHONE"/>
            </div>
             <div class="form-group">
                <label for="img">IMAGE URL</label>
                <div class="row">
                    <div class="col-sm-8">
                        <input type="text" [(ngModel)]="contact.image" ngControl="img" #img="ngForm" class="form-control" placeholder="IMAGE"/>
                    </div>
                    <div class="col-sm-4">
                          <img [src]="contact.image" class="img-thumbnail">
                    </div>
                </div>
              
            </div>
            
            <button class="btn btn-success-outline pull-right" type="submit" [disabled]="!myForm.form.valid">SAVE</button>
        </form>
    </div>
</div>