Store input value in array with ionic angular 5

Question

I have this in my html side :

<ion-grid style="margin-bottom: 25px;">
  <ion-row padding>
    <ion-col col-11>
      <label class="bold">Title</label>
      <ion-input type="text" class="bordered" placeholder="Enter Title" [(ngModel)]="data.title"></ion-input>
    </ion-col>
  </ion-row>

  <ion-row padding>
    <ion-col col-11 class="pharagraph margin-bottom">
      <label class="bold">Pharagraph</label>
      <ion-textarea rows="10" class="bordered" placeholder="Enter Content Paragraph" [(ngModel)]="data.paragraph"></ion-textarea>
    </ion-col>
  </ion-row>

  <ion-row padding *ngFor="let input of inputs; let i=index">
    <ion-col col-11 class="pharagraph margin-bottom">
      <ion-textarea rows="10" class="bordered" placeholder="Enter Content Paragraph" [(ngModel)]="data.paragraph[i]"></ion-textarea>
    </ion-col>

    <ion-col col-1>
      <button ion-button clear icon-start icon-right (click)="delParagraph(i)"><ion-icon name="trash" color="danger"></ion-icon></button>
    </ion-col>
  </ion-row>

  <ion-row padding>
    <ion-col col-11>
      <button ion-button block color="danger" id="addPharagraph" (click)="addParagraph()"><ion-icon name="add-circle"></ion-icon> &nbsp; add pharagraph</button>
    </ion-col>
  </ion-row>

</ion-grid>

<div class="tab" style="position: fixed; bottom: 0;">
  <a class="tab-item" (click)="save()">Save Draft</a>
</div>

As you can see here, there is an input for a paragraph by default and user can choose to add another paragraph as many as they want.

Here is my TypeScript :

data:any = {};

constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
    this.data.title = '';
    this.data.paragraph = '';
}

addParagraph(){
    this.inputs.splice(0,0,this.inputs.length+1);
 }

delParagraph(paragraphID){
    this.inputs.splice(this.inputs.indexOf(paragraphID), 1);
}

save(){
    var testData = JSON.stringify(this.data);
    console.log(testData);
}

With those code, I can only display the data in 1 dimension like this :

{
    "title":"testing title",
    "paragraph":"testing paragraph 1"
}

But I wanted it to be displayed in this form :

{
    "title":"testing title",
    "paragraph":[
        {"paragraph": "testing paragraph 1"},
        {"paragraph": "testing paragraph 2"},
        {"paragraph": "testing paragraph 3"}
    ]
}

Vega · Accepted Answer · 2018-05-16 09:10:27Z

I suggest the following:

Class:

data = {
    "title": "testing title",
    "paragraphs": [
      { "paragraph": "testing paragraph 1" },
      { "paragraph": "testing paragraph 2" },
      { "paragraph": "testing paragraph 3" }
    ]
  }

...

addParagraph(){
    this.data.paragraphs.push( { "paragraph": "" });
 }

delParagraph(paragraphID){
    this.data.paragraphs.splice(paragraphID,1);
}

HTML

<ion-row padding *ngFor="let paragraph of data.paragraphs; let i=index">
    <ion-col col-11 class="pharagraph margin-bottom">
        <ion-textarea rows="10" class="bordered" placeholder="Enter Content Paragraph" [(ngModel)]="paragraph.paragraph"></ion-textarea>
    </ion-col>
    <ion-col col-1>
        <button ion-button clear icon-start icon-right (click)="delParagraph(i)"><ion-icon name="trash" color="danger"></ion-icon></button>
    </ion-col>
</ion-row>

<ion-row padding>
    <ion-col col-11>
        <button ion-button block color="danger" id="addPharagraph" (click)="addParagraph()"><ion-icon name="add-circle"></ion-icon> &nbsp; add pharagraph</button>
    </ion-col>
</ion-row>

Demo

andrea06590 · Accepted Answer · 2018-05-16 09:18:41Z

1

Hello I think you wanted to define an array of paragraph instead of string

this.data.title = '';
this.data.paragraph = [{}] instead of '';

And push your paragraphs in this.data.paragraph ;)

this.data.paragraph.push({paragraph: 'My text content'});

answered May 16, 2018 at 9:18

andrea06590

1,3093 gold badges11 silver badges23 bronze badges

Collectives™ on Stack Overflow

Store input value in array with ionic angular 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related