details-fields.component.html

<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
  <label *ngIf="canMarkEntryAsWIP">
    <input
      id="isEntryRunning"
      type="checkbox"
      (change)="onGoingToWorkOnThisChange($event)"
      [checked]="goingToWorkOnThis"
    />
    I am working on this
  </label>

  <div class="form-group row">
    <label class="col-12 col-sm-2 col-form-label">Project:</label>
    <div class="col-12 col-sm-10 autocomplete">
      <ng-select
      bindLabel="search_field"
      formControlName="project_name"
      placeholder="Enter the project name"
      notFoundText="No projects found"
      [items]="listProjectsShowed"
      (search)="onClearedComponent($event)"
      (change)="onSelectedProject($event)"
      ngDefaultControl="project_name">

        <ng-template ng-option-tmp let-item="item">
          <div class="flex flex-wrap flex-row justify-between">
            <div class="p-2 text-xs">
              <span>{{item.customer.name}}</span> -
              <strong><span>{{item.name}}</span></strong>
            </div>
          </div>
        </ng-template>
      </ng-select>

      <!-- <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar> -->
    </div>
  </div>
  <div (click)="onclickFormAction(!(project_id.value && project_name.value))">
    <fieldset [disabled]="!(project_id.value && project_name.value)">
      <div class="form-group row">
        <label class="col-12 col-sm-2 col-form-label">Activity:</label>
        <div class="col-12 col-sm-10">
          <select
            [class.is-invalid]="activity_id.invalid && activity_id.touched"
            required
            id="activity_id"
            class="custom-select"
            formControlName="activity_id"
          >
            <option value="" selected="selected"></option>
            <option *ngFor="let activity of activities$ | async" value="{{ activity.id }}">{{ activity.name }}</option>
          </select>
        </div>
        <div
          class="invalid-feedback"
          *ngIf="(activity_id.dirty || activity_id.touched) && activity_id.invalid && activity_id.errors.required"
        ></div>
      </div>

      <div class="form-group row">
        <label class="col-12 col-sm-2 col-form-label">Ticket:</label>
        <div class="col-12 col-sm-10">
          <input
            formControlName="uri"
            id="uri"
            type="text"
            placeholder="Enter your ticket number"
            class="url-ticket-input form-control"
            aria-label="Small"
            aria-describedby="inputGroup-sizing-sm"
          />
        </div>
      </div>

      <div class="form-group row" >
        <label class="col-12 col-sm-2">Date:</label>
        <div class="col-12 col-sm-4" tabindex="0">
          <input
            matInput
            formControlName="start_date"
            id="start_date"
            class="form-control"
            aria-label="Small"
            aria-describedby="inputGroup-sizing-sm"
            [class.is-invalid]="start_date.invalid && start_date.touched"
            required
            (ngModelChange)="onStartDateChange($event)"
            [max]="getCurrentDate()"
            onkeydown="return false"
            [tabIndex]="1"
            (click)="openOrCloseDatePicker(datepickerStartDate)"
            (dateInput)="start_date.setValue($event.value.format('YYYY-MM-DD'))"
            [matDatepicker]="datepickerStartDate"
          />
          <mat-datepicker #datepickerStartDate></mat-datepicker>
        </div>

        <label class="col-12 col-sm-2">Time in:</label>
        <div class="col-12 col-sm-4">
          <ngx-timepicker-field
            [format]="24"
            formControlName="start_hour"
            id="start_hour"
            class="timepicker-input"
            [defaultTime]="'00:00'"
            [class.timepicker-input--disabled]="!(project_id.value && project_name.value)"
          ></ngx-timepicker-field>
        </div>
      </div>

      <div class="form-group row" *ngIf="!goingToWorkOnThis || !canMarkEntryAsWIP">
        <label class="col-12 col-sm-2">Total Hours:</label>
        <div class="col-12 col-sm-4">
          <span class="border-tag" [class.border-tag--disabled]="!(project_id.value && project_name.value)">
            {{ this.getTimeDifference() }}
          </span>
        </div>

        <label class="col-12 col-sm-2">Time out:</label>
        <div class="col-12 col-sm-4">
          <ngx-timepicker-field
            [format]="24"
            formControlName="end_hour"
            id="end_hour"
            class="timepicker-input"
            [defaultTime]="'00:00'"
            [class.timepicker-input--disabled]="!(project_id.value && project_name.value)"
          ></ngx-timepicker-field>
        </div>
      </div>

      <app-technologies
        (technologyUpdated)="onTechnologiesUpdated($event)"
        [selectedTechnologies]="selectedTechnologies"
        [isDisabled]="isTechnologiesDisabled"
        #technologies
      >
      </app-technologies>

      <div class="form-group text-left">
        <label for="NotesTextarea">Description:</label>
        <textarea
          maxlength="1500"
          formControlName="description"
          placeholder="Write a brief description of your activity"
          class="form-control"
          id="NotesTextarea"
          rows="3"
        ></textarea>
      </div>
    </fieldset>
  </div>
  <div class="modal-footer">
    <button type="submit" id=submitButton class="btn btn-primary">Save</button>
    <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
  </div>
</form>