Angular - ngx clipboard throwing error when used for two elements in a same component

Question

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>

Answer 1

等待大神答复