0

In my template, I have two form controls with copy to clipboard buttons

The error I'm facing: Click on the second copy button and then Cancel or save the form throws error. Error in the dev tool console.

<div *ngIf="deployment.id">
<input slot="input" name="id" formControlName="id" type="text" class="form-control disabled" />

<div #depkeyContainer class="copyToClipboard">
    <button
        type="button"
        ngxClipboard
        [cbContent]="deployment.id"
        (cbOnSuccess)="isCopiedDepKey=true; copyToClipboardText();"
        [container]="depkeyContainer">
        Copy to clipboard
    </button>
</div>
</div>                    
<div *ngIf="deployment.snippet">
<textarea
        type="text"
        id="snippet"
        rows="9"
        formControlName="snippet"
        class="form-control disabled">
</textarea>
   
<div #snippetContainer class="copyToClipboard">
    <button
        type="button"
        ngxClipboard
        [cbContent]="deployment.snippet"
        (cbOnSuccess)="isCopiedSnippet=true; copyToClipboardText()"
        [container]="snippetContainer">
        Copy to clipboard
    <button>
</div>
</div>
Sana Sait
  • 63
  • 5
  • Noticed that the error is produced from the 'destroy' method of ngx-clipboard.js. – Sana Sait Jan 06 '21 at 13:09
  • destroy(container = this.document.body) { if (this.tempTextArea) { container.removeChild(this.tempTextArea); // removeChild doesn't remove the reference from memory this.tempTextArea = undefined; } } – Sana Sait Jan 06 '21 at 13:09
  • Here 'container' always holds reference to first clipboard div element. – Sana Sait Jan 06 '21 at 13:12
  • Removing [container] property fixed the issue. Now the container holds the reference to document body element. – Sana Sait Jan 06 '21 at 13:38

0 Answers0