Why is ngxClipboard complaining about needing an input element?

Question

I have a fairly basic reactive form in Angular 5 with the following ngx-clipboard markup:

<form [formGroup]="shareForm">
    <mat-form-field>
        <input matInput formControlName="shareUrl" 
          placeholder="Click to copy URL" readonly="true" 
          [ngxClipboard]="currentUrl" (cbOnSuccess)="onClipboardCopy()">
    </mat-form-field>
</form>

However, the page throws an error:

Error: Target should be input or textarea

Why does ngx-clipboard not see the input as the target?

score 1 · Accepted Answer · answered Jun 06 '18 at 14:32

The docs imply the use of one directive or the other. I got it working by using both directives.

<input matInput formControlName="shareUrl"
  placeholder="Click to copy URL"
  readonly="true"
  ngxClipboard [cbContent]="currentUrl" (cbOnSuccess)="onClipboardCopy()">
       ^--- here    ^--- and here

Why is ngxClipboard complaining about needing an input element?

1 Answers1