Angular - On Paste Event Get Content

Question

I have an angular component that allows a user to enter data into a textarea. There are two events tied to this keydown and paste. Both of these events trigger the same method which will try and determine the data entered.

The issue I am having is when the data is pasted paste, I am getting the value of the formControl but its the value BEFORE the data is pasted and doesn't include what I actually just entered into the field.

HTML

<textarea    formControlName="multiSearch"    class="form-control"    placeholder="Enter one or more values. One per line."    rows="6"    (keydown)="keyDownFunction($event)"   (paste)="onPaste()"> </textarea> 

Component

  /**    * If we hit enter in our text area, determine the data type    */   keyDownFunction(event) {      // Enter Key?     if (event.keyCode == 13) {       this.determineDataType();     }   }    /**    * If we paste data in our text area, determine the data type    */   onPaste() {     this.determineDataType();   }    /**    * Using regex, determine the datatype of the data and confirm with the user.    */   determineDataType() {     console.log(this.searchForm.value.multiSearch)   } 

Question How can I get access to the data that is pasted into the form as soon as the paste event is fired and not what the value was before pasting?

Answer 1

You can get the pasted content from the paste event and the updated content of the textarea by handling the input event:

<textarea #myText (paste)="onPaste($event)" (input)="onInput(myText.value)"></textarea> 

with this code:

onPaste(event: ClipboardEvent) {   let clipboardData = event.clipboardData || window.clipboardData;   let pastedText = clipboardData.getData('text');   ... }  onInput(content: string) {   ... } 

See this stackblitz for a demo.