<eos-document-control [formControl]="form.controls.documents" [buttonRendererOptions]="{buttonText: 'ยงยง Choose documents' | transloco }" [labelOnTop]="true" [mode]="'multiple'" [selectedOptionsRenderer]="selectedOptionsRendererTpl" label="{{ 'documents' | transloco }}" ></eos-document-control> <ng-template #selectedOptionsRendererTpl let-selectedDocuments> <div *ngFor="let document of selectedDocuments" class="flex mt-2 gap-half" > <div class="flex flex-1 justify-between"> {{ document.label }} <eos-icon (click)="removeDocument(document, $event)" class="m-0 cursor-pointer" icon="remove-circle-2" width="18" ></eos-icon> </div> </div> </ng-template> removeDocument(document: DocumentControlDocument, event: MouseEvent): void { event.stopPropagation(); const control = this.form.controls.documents; control.setValue(control.value.filter(value => value.id !== document.id)); }