src/app/pages/persons/internal-person/internal-person-details/communications-data-details/communications-data-details.component.html

<!-- /********************************************************************************
* Copyright (c) 2020 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/ -->
<form  [ngrxFormState]="internalPersonDetailsSandbox.communicationsDataDetailsFormState$ | async">
  <h4>{{createOrEditCommunicationsData}}</h4>
  <div>
    <!-- type -->
    <div class="form-group row">
      <label for="communicationType" class="col-sm-4 col-form-label">{{ 'CommunicationsData.CommunicationType' | translate }}</label>
      <div class="col-sm-7">
        <select
          type="text"
          class="form-control"
          [ngrxFormControlState]="((internalPersonDetailsSandbox.communicationsDataDetailsFormState$ | async)?.controls)['communicationTypeId']">
          <option [value]="">{{ 'SelectOption' | translate }}</option> -->
          <option *ngFor="let communicationType of communicationTypesSandbox.communicationTypes$ | async" [disabled]="communicationType.isDisabled" [value]="communicationType.id">{{communicationType.type}}</option>
        </select>
      </div>
    </div>

    <!-- communicationData -->
    <div class="form-group row">
      <label for="communicationData" class="col-sm-4 col-form-label">{{ 'CommunicationsData.CommunicationData' | translate }}</label>
      <div  class="col-sm-7">
        <input type="text"
                maxlength="1024"
                class="form-control"
                id="communicationData"
                [ngrxFormControlState]="((internalPersonDetailsSandbox.communicationsDataDetailsFormState$ | async)?.controls)['communicationData']"
                autocomplete="off"
        />
      </div>
    </div>

    <!-- note -->
    <div class="form-group row">
      <label for="note" class="col-sm-4 col-form-label">{{ 'CommunicationsData.Note' | translate }}</label>
      <div  class="col-sm-7">
        <input type="text"
              maxlength="255"
              class="form-control"
              id="note"
              [ngrxFormControlState]="((internalPersonDetailsSandbox.communicationsDataDetailsFormState$ | async)?.controls)['note']"
              autocomplete="off"
        />
      </div>
    </div>

    <!-- buttons -->
    <button
      type="button"
      class="btn btn-primary btn-sm btn-success"
      (click)="internalPersonDetailsSandbox.persistCommunicationsData()"
    >
      {{ 'SaveBtn' | translate }}
    </button>

    <button
      type="button"
      class="btn btn-primary btn-sm"
      (click)="internalPersonDetailsSandbox.closeCommunicationsDataDetail()"
    >
      {{ 'CancelBtn' | translate }}
    </button>
  </div>
</form >