Added labels and hide dates if disabled

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

@@ -9,6 +9,7 @@
          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">
@@ -17,9 +18,11 @@
         </select>
       </div>
 
-      <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"
@@ -37,9 +40,11 @@
         </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"
@@ -58,6 +63,7 @@
       </div>
 
       <div>
+        <label>&nbsp;</label>
         <button type="button" class="btn btn-outline-danger"
                 [disabled]="form.status === 'DISABLED'"
                 (click)="removeAccessControlItem(i)">

src/app/shared/access-control-form-container/access-control-form-container-intial-state.ts

@@ -1,6 +1,6 @@
 import {ListableObject} from '../object-collection/shared/listable-object.model';
 
-export const accessControlInitialFormState: AccessControlFormState = {
+export const createAccessControlInitialFormState = (): AccessControlFormState => ({
   item: {
     toggleStatus: false,
     accessMode: 'replace',
@@ -11,7 +11,7 @@ export const accessControlInitialFormState: AccessControlFormState = {
     changesLimit: 'all', // 'all' | 'selected'
     selectedBitstreams: [] as ListableObject[],
   },
-};
+});
 
 export interface AccessControlFormState {
   item: {

src/app/shared/access-control-form-container/access-control-form-container.component.ts

@@ -16,7 +16,9 @@ import { BulkAccessConfigDataService } from '../../core/config/bulk-access-confi
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { BulkAccessConditionOptions } from '../../core/config/models/bulk-access-condition-options.model';
 import { AlertType } from '../alert/aletr-type';
-import { accessControlInitialFormState } from './access-control-form-container-intial-state';
+import {
+  createAccessControlInitialFormState
+} from './access-control-form-container-intial-state';
 
 @Component({
   selector: 'ds-access-control-form-container',
@@ -61,7 +63,7 @@ export class AccessControlFormContainerComponent<T extends DSpaceObject> impleme
     private cdr: ChangeDetectorRef
   ) {}
 
-  state = accessControlInitialFormState;
+  state = createAccessControlInitialFormState();
 
   dropdownData$: Observable<BulkAccessConditionOptions> = this.bulkAccessConfigService.findByName('default').pipe(
     getFirstCompletedRemoteData(),
@@ -92,7 +94,7 @@ export class AccessControlFormContainerComponent<T extends DSpaceObject> impleme
   reset() {
     this.bitstreamAccessCmp.reset();
     this.itemAccessCmp.reset();
-    this.state = accessControlInitialFormState;
+    this.state = createAccessControlInitialFormState();
   }
 
   /**