src/app/features/forms/statement-information/components/general-information-form-group/general-information-form-group.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 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<div [formGroup]="appFormGroup" class="form-group-container form-group-container---fill">

  <div class="form-group-container--label">
    <label [for]="appId + '-title'">
      {{"statementInformationForm.controls.title" | translate}}
    </label>
  </div>

  <input [formControlName]="'title'"
         [id]="appId + '-title'"
         appFormControlStatus
         autocomplete="off"
         class="openk-input openk-info form-group-container--input"
         required>

  <div class="form-group-container--label">
    <label [for]="appId + '-city'">
      {{"statementInformationForm.controls.city" | translate}}
    </label>
  </div>

  <input [formControlName]="'city'"
         [id]="appId + '-city'"
         appFormControlStatus
         autocomplete="off"
         class="openk-input openk-info form-group-container--input"
         required>

  <div class="form-group-container--label">
    <label [for]="appId + '-district'">
      {{"statementInformationForm.controls.district" | translate}}
    </label>
  </div>

  <input [formControlName]="'district'"
         [id]="appId + '-district'"
         appFormControlStatus
         autocomplete="off"
         class="openk-input openk-info form-group-container--input"
         required>

  <div class="form-group-container"></div>

  <div class="form-group-container form-group-container--sectors">
    <ng-container
      *ngIf="(appSectors | sector: appFormGroup.value) != null">
      <span class="form-group-container--sectors--label">
        {{("shared.sectors.available" | translate)}}
      </span>
      <span class="form-group-container--sectors--label---italic">
        {{(appSectors | sector: appFormGroup.value)}}
      </span>
    </ng-container>
    <span *ngIf="(appSectors | sector: appFormGroup.value ) == null"
          class="form-group-container--sectors--label">
      {{"shared.sectors.none" | translate}}
    </span>
  </div>


</div>

<div [formGroup]="appFormGroup" class="form-group-container">

  <div class="form-group-container--label">
    <label [for]="appId + '-type'">
      {{"statementInformationForm.controls.typeId" | translate}}
    </label>
  </div>

  <div>
    <app-select #selectComponent
                [appDisabled]="appStatementTypeOptions?.length == null || appStatementTypeOptions.length === 0"
                [appId]="appId + '-type'"
                [appOptions]="appStatementTypeOptions"
                [appPlaceholder]="selectComponent.appDisabled ? 'Keine Daten verfügbar...' : ''"
                [formControlName]="'typeId'"
                appFormControlStatus
                class="openk-info form-group-container--select"
                required>
    </app-select>
  </div>

  <div class="form-group-container--label">
    <label [for]="appId + '-receipt-date'">
      {{"statementInformationForm.controls.receiptDate" | translate}}
    </label>
  </div>

  <div>
    <app-date-control [appId]="appId + '-receipt-date'"
                      [formControlName]="'receiptDate'"
                      appFormControlStatus
                      class="openk-info"
                      required>
    </app-date-control>
  </div>

  <div class="form-group-container--label">
    <label [for]="appId + '-due-date'">
      {{"statementInformationForm.controls.dueDate" | translate}}
    </label>
  </div>

  <div>
    <app-date-control [appId]="appId + '-due-date'"
                      [formControlName]="'dueDate'"
                      appFormControlStatus
                      class="openk-info"
                      required>
    </app-date-control>
  </div>

</div>