Ionic/Angular, Submitting an Input Field from Array of Fields

Question

I'm a little confused by how I should go about this. I have a "feed" in my app, where each post in the feed has a comment box. Here's some sample code:

<ion-card class="feed" *ngFor="let post of feed">
  <ion-item no-lines class="comment-input">
    <ion-input type="text" placeholder="Write comment ..."></ion-input>
    <button item-right ion-button (click)="feedPostComment(post)">Comment</button>
  </ion-item>
</ion-card>

Now what I'm struggling to figure out is the best way to go about feedPostComment() to pull the text from the input field above it. I know I could use ngModel and I have in many cases for forms and input systems on pages where they aren't repeating in this way, but I just can't wrap my head around how I would do it in this case.

I was thinking that I could set post.id to be the id or name field on the ion-input, and target the input field directly through the DOM, but I realize that isn't good practice.

The other thing is, the feed itself will be regularly updating with new posts. Sincerest thanks in advance.

HasilT · Accepted Answer · 2018-09-03 01:05:03Z

1

Use ngModel with an object property to store comments added to that specific post. here is a stackblitz example.

<ion-card class="feed" *ngFor="let post of feed">
    <ion-item no-lines class="comment-input">
        <ion-input [(ngModel)]="post.comment" type="text" placeholder="Write comment ..."></ion-input>
        <button item-right ion-button (click)="feedPostComment(post)">Comment</button>
    </ion-item>
</ion-card>


//controller 
feedPostComment(post) {
  console.log('post_comment => ', post.comment);
  console.log('post_id => ',post.id);
}

edited Sep 3, 2018 at 1:05

answered Sep 2, 2018 at 16:37

HasilT

2,6092 gold badges20 silver badges28 bronze badges

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

2 Comments

capcom-r Over a year ago

You are awesome. Thank you so much!

user10201743 Over a year ago

You are awesome Apu.

Collectives™ on Stack Overflow

Ionic/Angular, Submitting an Input Field from Array of Fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related