dspace-angular/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html

<form [formGroup]="form">
  <div *ngIf="mode === 'replace' && allControlsAreEmpty && form.status !== 'DISABLED'" class="alert alert-warning">
    {{'access-control-no-access-conditions-warning-message' | translate}}
  </div>

  <ng-container *ngFor="let control of accessControl.controls; let i = index">
    <div [formGroup]="$any(control)"
         class="mt-3" data-testId="access-control-item"
         style="display: grid; grid-template-columns: 1fr 1fr 1fr 50px; grid-gap: 5px">

      <div>
        <label for="accesscontroloption">{{'access-control-option' | translate}}</label>
        <select id="accesscontroloption" formControlName="itemName" class="form-control">
          <option value=""></option>
          <option *ngFor="let option of dropdownOptions" [value]="option.name">
            {{ option.name }}
          </option>
        </select>
      </div>

      <div [class.d-none]="control.get('endDate')?.disabled">
        <div class="input-group">
          <label for="accesscontrolstartdate">{{'access-control-start-date' | translate}}</label>
          <input
            id="accesscontrolstartdate"
            class="form-control"
            placeholder="yyyy-mm-dd"
            name="dp"
            formControlName="startDate"
            [minDate]="control | maxStartDate: dropdownOptions"
            ngbDatepicker
            #d="ngbDatepicker"
          />
          <div class="input-group-append">
            <button class="btn btn-outline-secondary fas fa-calendar"
                    [disabled]="form.status === 'DISABLED'"
                    (click)="d.toggle()"
                    type="button"></button>
          </div>
        </div>
      </div>

      <div [class.d-none]="control.get('endDate')?.disabled">
        <label for="accesscontrolenddate">{{'access-control-end-date' | translate}}</label>
        <div class="input-group">
          <input
            id="accesscontrolenddate"
            class="form-control"
            placeholder="yyyy-mm-dd"
            name="dp"
            formControlName="endDate"
            [maxDate]="control | maxEndDate: dropdownOptions"
            ngbDatepicker
            #d1="ngbDatepicker"
          />
          <div class="input-group-append">
            <button type="button" class="btn btn-outline-secondary fas fa-calendar"
              [disabled]="form.status === 'DISABLED'"
              (click)="d1.toggle()">
            </button>
          </div>
        </div>
      </div>

      <div>
        <label>&nbsp;</label>
        <button type="button" class="btn btn-outline-danger"
                [disabled]="form.status === 'DISABLED'"
                (click)="removeAccessControlItem(i)">
          <i class="fas fa-trash"></i>
        </button>
      </div>
    </div>

  </ng-container>

  <button type="button" id="add-btn" class="btn btn-outline-primary mt-3"
          [disabled]="form.status === 'DISABLED'"
          (click)="addAccessControlItem()">
    <i class="fas fa-plus"></i>
    {{'access-control-add-more' | translate}}
  </button>

</form>