Adding an array of items to textarea when selecting checkboxes in Angular 2

Question

I have a list of checkboxes in for loop and as I select one the name needs to get displayed in a textarea so as I keep selecting they need to get added and as I deselect they need to be removed. I am able to add the items but dispay only one at a time. I am unable to display array in the textarea. Also I was facing issues while trying to remove the deselected items. Please help. Below is my code....

Checkbox

<div *ngFor="let items of itemList">
  <div class="xxx"><input type="checkbox" id="chk" name="checker" (click)="AddToTextArea(items.Name)" />
   {{items.Name}}
  </div>
</div>

Text Area

<textarea class="ttt" id="itemList" name="itemName" rows="5" [(ngModel)]="displayItemNameList"></textarea>

Component Method

public displayItemNameList = [];

AddToTextArea(iName){
  this.displayItemNameList.push(iName);
}

Also help me with If I am deseleciting how can I remove the item Name from the array. I was trying to check indexof for this not sure if that would be helpful. Please guide....

Your post title do not really match your question, try to edit your post title :) — Orodan
– Orodan, Commented Apr 17, 2018 at 20:41

Orodan · Accepted Answer · 2018-04-17 20:17:29Z

1

Here is an example on stackblitz of how I would to it.

The main points are the following :

You use your checkboxes to add or remove items in an array representing your selected items.
Then, you create a getter for another variable in your component responsible to send a string representation of the array (for example you can use toString() for a basic display).
To finish, you bind this string variable to your textarea.

Hope that helps

answered Apr 17, 2018 at 20:17

Orodan

1,0572 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

niraja k Over a year ago

Hi Orodan thanks for your inputs. I have updated my code to push all the list of checked items into an array but my textarea doesnot display the complete array list. it only displays the first item though al the other items are added to the array....Its an issue with display or binding with textarea. Can I in anyway use the value or name attributes of the textarea element to display the complete array?

Orodan Over a year ago

Normally you only need to bind your variable to your textarea thanks to ngModel. Are you sure you bind it properly like in my example ? Not the array, but the string representation of it ?

niraja k Over a year ago

The problem is that I cant use string representation as I send an array in input.

Orodan Over a year ago

Look at my example please, you can keep your array, just bind your textarea to a variable that send a string representation of your array. It's easily done through a getter. Something like "get myArrayAsString () { return this.myArray.toString() } - and in your template : <textarea name="test" [ngModel]="myArrayAsString"></textarea>

niraja k Over a year ago

Thanks Orodan! I was able to fix the issue....it was with another attached form which when I removed, everything went well....I am new to Angular....

|

rohith · Accepted Answer · 2018-04-18 04:42:47Z

0

<div *ngFor="let items of itemList;let i=index">
  <div class="xxx"><input type="checkbox" id="chk" name="checker{{i}}" (click)="AddToTextArea(items.Name)" />
   {{items.Name}}
  </div>
</div>


<textarea class="ttt" id="itemList" name="itemName" rows="5">
{{showselected()}}</textarea> // you can also iterate a list here with ngFor

in your component.ts,

displayItemNameList = [];

AddToTextArea(iName){
  if(this.displayItemNameList.indexOf(iName)>-1){
  this.displayItemNameList.splice(this.displayItemNameList.indexOf(iName),1);
  }else{
   this.displayItemNameList.push(iName);
  }

}

showselected(){
 this.displayItemNameList.toString(); // this is basic string representation of array
}

answered Apr 18, 2018 at 4:42

rohith

4164 silver badges8 bronze badges

1 Comment

niraja k Over a year ago

Thanks Rohit I was able to fix this. There was an unnecessary form that was causing issues once I removed it my issue was fixed...

Collectives™ on Stack Overflow

Adding an array of items to textarea when selecting checkboxes in Angular 2

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related