Utilizing Ionic and Angular to Submit an Input Field from an Array of Fields

I'm feeling a bit perplexed about how to approach this situation. In my app, there is a "feed" feature where each post includes a comment box. Here's a snippet of the 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, I'm struggling to determine the best approach for implementing feedPostComment() to retrieve the text from the input field above it. Although I have used ngModel in various cases for forms and input fields on non-repeating pages, I am finding it challenging to apply it in this scenario.

One thought I had was to assign post.id as the id or name attribute of the ion-input, and then access the input field directly via the DOM. However, I am aware that this practice is not recommended.

Additionally, since the feed will be regularly updated with new posts, I appreciate any guidance provided in advance. Thank you.

angulartypescriptionic-frameworkinput

Answer №1

To keep track of comments related to a specific post, utilize ngModel with an object property. Check out this StackBlitz demonstration.

<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);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing ControlValueAccessor in various components

I am currently working on a component that implements the ControlValueAccessor interface, and I am facing some difficulties in understanding how to properly utilize it: // Angular Imports import { Component, OnInit, forwardRef, Output, EventEmitter, OnC ...

javascriptangulartypescriptangular2-formscontrolvalueaccessor

Exploring Angular's Observables for handling HTTP requests

Exploring Angular Observable Documentation As I delved into the Angular observable documentation mentioned above, I came across a section that compares promises with observables. Observables provide many values, while promises provide one. This characte ...

javascriptangularrxjsobservablerxjs-observables

Angular: Using cross-field validation to invalidate bootstrap input fields

In my reactive form, I have two fields named from and to. I am in need of a validation mechanism that checks if the value in the from field is lower than the value in the to field every time either of them is changed. To achieve this validation, I have imp ...

angularvalidationbootstrap-4

Custom component not rendering expected CSS style

I have successfully developed a custom web component without using any framework. I then proceeded to populate it with content from a template tag. Although I was able to manipulate the content using JavaScript, I encountered difficulties when trying to m ...

javascriptcsstypescriptweb-componentnative-web-component

What is the process for assigning a predefined type that has already been declared in the @types/node package?

Is there a way to replace the any type with NetworkInterfaceInfo[] type in this code snippet? Unfortunately, I am unable to import @types/node because of an issue mentioned here: How to fix "@types/node/index.d.ts is not a module"? Here is the o ...

typescript

Creating a custom type in Typescript using a function for testing purposes

I have been exploring ways to limit my search capabilities to specific criteria. Let's say I have a model and some data like the following: interface UserModel { _id: string; username: string; party: UserPartyModel; } interface UserParty ...

typescriptmongodbtypescript-typingstypescript-generics

Error TRPCClient: The unexpected presence of the token "'<'", ""<!DOCTYPE "... invalidates the JSON format within Next.JS

Encountering an error in the authentication call back page: TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON in Next.JS. The issue occurs in src/app/auth-callback/page.tsx and here's the relevant code ...

reactjstypescriptauthenticationnext.jstrpc

Asynchronous binding within a dynamic form

After following the Angular guide on creating dynamic forms, I have developed a series of classes to generate forms dynamically. While this approach is effective, it doesn't offer much efficiency unless the forms can be dynamically generated based on ...

angularformsasynchronousbindingangular5

What is the best layer to handle Entity-DTO conversion in my application?

I utilized TypeORM to establish two entities: User and School: @Entity() export class User { // ... @ManyToOne(() => School, school => school.id) school: School; // ... static from( uid: string, name: string, email: string, ...

typescriptnestjsentitydto

Steps to resolve the "ERESOLVE could not resolve" error during the deployment of Firebase functions

Trying to deploy my Firebase function with the command firebase deploy --only functions:nextServer results in an error: ✔ functions: Finished running predeploy script. i functions: ensuring required API cloudfunctions.googleapis.com is enabled... i fu ...

typescriptfirebasegoogle-cloud-functionsnpm-install

Displaying Modal from a separate component

CardComponent: export class Card extends Component<Prop, State> { state = { isCancelModalOpen: false, }; marketService = new MarketService(); deleteMarket = () => { this.marketService .deleteMar( ...

javascriptreactjstypescriptreact-props

Implement the Promise return type for a function in Angular

I'm looking to modify the following method to change the return type to a Promise or Observable: basketItemNodes: TreeNode[] = []; getBasketItems() { this.basketService.getAllBasketItems() .subscribe( res => { this.basketItemN ...

angulartypescriptpromisereturnobservable

Error: Unable to access the 'visitStatement' property of an undefined object within Angular 2

Help! I encountered an error in my angular2 application. The error message says: TypeError: Cannot read property ‘visitStatement’ of undefined ...

angularruntime-error

How to incorporate a custom JavaScript file into an Angular 7 application

Suppose there is a JavaScript file named mylib.js in an angular 7 application, located at assets/mylib.js: mylib = function(){ return { hi: function() { alert('hi'); } }; }(); If I want to be able to call mylib.hi() in my hero-f ...

javascriptangularangular7

Generating ng2 chart data dynamically within Angular 4

In my latest project, I've developed an application that retrieves data from a service in JSON format and displays it on a UI chart. However, I've encountered a recurring issue where the data does not bind properly to the chart despite multiple ...

angularchartsng2-charts

A different method for uploading image files (such as jpg) in Angular 8

I am looking to integrate Angular 8 with an Asp.Net Web Api for uploading image files and storing them in a SQL server database table where the image column is defined as varbinary(max). Although I have successfully achieved this using ASP.Net web forms, ...

sqlsql-serverangular

What steps can be taken to prevent encountering this error on the console?

After successfully testing the REST API in Postman and verifying that the backend code works fine on the server, I encountered an error when connecting Angular to the API that I'm struggling to resolve. The error I'm facing is (GET http://localho ...

angular

using angular and firestore to grant public reading permission for a document

As a student developer, I recently integrated Firestore into my Angular app and encountered some challenges with the security rules. My goal: I want to display a Firestore document in an Angular view using template binding. The document should be visible ...

angularfirebasegoogle-cloud-firestore

What measures can I take to ensure that bcrypt does not negatively impact the speed of my website

Currently, I am undertaking a project that involves Angular and Node.js. The security of different passwords is ensured by using bcrypt. However, there is an ongoing issue that has been giving me some trouble. During the registration process for new users ...

node.jsangularperformancehashbcrypt

Node.js Decrypts Data Before Sending Response from Database

Issue Update I'm currently facing a challenge in reinserting a decrypted value back into the response after decrypting it. I just need guidance on how to place a value back into the response after manipulation. Scenario Background Within the backen ...

node.jspostgresqlhttpangularnode-postgres