<div class="container">
  <div class="row" style="margin-top:2%;">
      <div class="col-lg-4 col-md-4"></div>
      <div class="col-lg-4 col-md-4">
    <form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
      <input type="hidden" name="id" #id="ngModel" [(ngModel)]="service.formData.pid">
      <div class="form-group">
        <input name="header" #header="ngModel" [(ngModel)]="service.formData.header" class="form-control" placeholder="Header" required>
        <div *ngIf="header.invalid && header.touched" class="validation-error">This field is required.</div>
      </div>
      <div class="form-group">
        <input name="description" #description="ngModel" [(ngModel)]="service.formData.description" class="form-control" placeholder="Description" required>
        <div *ngIf="description.invalid && description.touched" class="validation-error">This field is required.</div>
      </div>
      <div class="form-group">
        <input name="teamcount" #teamcount="ngModel" [(ngModel)]="service.formData.teamcount" class="form-control" placeholder="Number of people required" required>
        <div *ngIf="teamcount.invalid && teamcount.touched" class="validation-error">This field is required.</div>
      </div>
      <div class="form-group">
        <input name="location" #location="ngModel" [(ngModel)]="service.formData.location" class="form-control" placeholder="Location" required>
        <div *ngIf="location.invalid && location.touched" class="validation-error">This field is required.</div>
      </div>
      <div class="form-row">
      <div class="form-group col-md-6">
        <input name="tag" #tag="ngModel" [(ngModel)]="service.formData.tag" class="form-control" placeholder="Tag">
        <div *ngIf="tag.invalid && tag.touched" class="validation-error">This field is required.</div>
      </div>
      <div class="form-group col-md-6">
        <input name="timeline" type="date" #timeline="ngModel" [(ngModel)]="service.formData.timeline" class="form-control">
        <div *ngIf="timeline.invalid && timeline.touched" class="validation-error">This field is required.</div>
      </div>
    </div>
    <div class="form-group">
      <input type="checkbox" name="onsite" value="onsite" id="onsite">Onsite
      <input type="checkbox" name="offsite" value="offsite" id="offsite">Offsite
    </div>
    <div class="form-group">
      <input name="image" type="file" (change)="upload($event)" accept=".png,.jpg,.jpeg" class="form-control" #image="ngModel"  [(ngModel)]="service.formData.image" required>
    </div>
      <div class="form-group">
        <button type="submit" [disabled]="form.invalid" class="btn btn-lg btn-block btn-info">SUBMIT</button>
      </div>
    </form>
    </div>
    <div class="col-lg-4 col-md-4">
    </div>
  </div>
</div>