What is the best way to prevent ngFor from repeating the input values being typed?

How can I prevent the same word from being repeated in all the inputs when using ngFor to create multiple inputs?

https://i.sstatic.net/kqh5X.png

Here is my code snippet:

    <div class="" *ngFor="let publication of publications">
            ...
        <form #newCommentForm="ngForm" (ngSubmit)="onSubmit(newCommentForm, $event, publication._id)">
           <div class="make-comment" >
              <img src="{{url+ 'get-image-user/' + publication.user.image }}" *ngIf="publication.user.image" class="rounded-circle-mini align-self-center">              
              <input type="text" name="#text" #text="ngModel" [(ngModel)]="comment.text" id="input-coment" class="form-control" required placeholder="Your comment">
              <button class="btn btn-sm btn-secondary" style="color: #fff;" type="submit"><i class="bi bi-arrow-bar-left"></i></button>    
            </div>
          </form>
        </div>

Answer №1

Ensure that each input [model] has its own scoped value by using 'publication' instead of 'comment.text'. This way, the value is specific to each input and not shared across all inputs.

*ngFor="let publication of publications"

Modify

[(ngModel)]="comment.text"
to something like
[(ngModel)]="publication.text"

Answer №2

Instead of binding all inputs to a single property comment.text, it is recommended to create a separate property for each input and bind the input elements accordingly.

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

Using Javascript to upload an image and show it in a small display

Hey there, I have a functioning JavaScript code that loads an image uploaded by the user onto the HTML page. However, the issue is that the image doesn't have a set maximum height or width, causing buttons on the page to move out of view and become in ...

Is there a way to make a table row clickable? I tried finding solutions online, but none of them seemed to work for me

Having trouble opening a new page when tapping on a cell (TR) using Javascript. Despite trying various online tutorials, I still can't get it to work properly. Any assistance would be greatly appreciated. Thank you. Below is the code snippet: fun ...

Utilizing absolute imports in Typescript directory structure

Our team has a preferred structure for organizing React code, which looks like this: components/ button.tsx slider.tsx index.ts helpers/ math.ts auth.ts index.ts constants/ config.ts api.ts index.ts In this setup, each ...

Exploring the integration of Vue.js and Requirejs for efficient development

After creating a new Vue.js project with vue-cli and building it using the command: vue build --target lib --name myWidget src/main.js I needed to utilize Requirejs for loading: <script> requirejs.config({ paths: { ...

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

Add a luminous shine to a THREE.TextGeometry element within the Three.js environment

After conducting extensive research on Google, I am still trying to determine if it is possible to achieve a glow effect within the three.js environment. My goal is to create a glowing effect based on TextGeometry rather than a simple primitive shape like ...

The placeholder string is being accepted as the input value for the number

My issue is with a form input of type number. When the form is submitted without entering any number, it treats the placeholder text "rating" as the value. How can I stop this from happening? I need to make sure that the input number field is marked as in ...

I encountered an error when attempting to utilize a recursive type alias in a generic context

When attempting to use a recursive type alias in a generic function, TypeScript v3.7.5 throws the error message: Type instantiation is excessively deep and possibly infinite.(2589). type State = { head: { title: string; description: s ...

Encountering an issue with postman where properties of undefined cannot be read

I am facing an issue while trying to create a user in my database through the signup process. When I manually enter the data in the create method, it works fine as shown below: Note: The schema components are {userName:String , number:String , email:Stri ...

Updating Angular UI-Router to version 1.0 causes issues with resolving data inside views

After upgrading my Angular UI-Router to version 1.0, I came across an interesting statement in the migration guide: We no longer process resolve blocks that are declared inside a views While it makes sense to move all resolve blocks to the parent state ...

Error encountered during Jest snapshot testing: Attempting to destructure a non-iterable object which is invalid

I am currently facing an issue with my React codebase where I am attempting to create snapshot tests for a component. However, Jest is showing an error indicating that I am trying to destructure a non-iterable instance. Despite thoroughly reviewing the cod ...

Exploring prototypal inheritance through Angularjs module.service设计(Note: This

Having worked with Angularjs for a few months now, I am curious about implementing efficient OOP within this framework. Currently, I am involved in a project where I need to create instances of a "terminal" class that includes constructor properties and v ...

Utilize Material-UI slider components to dynamically manage slider handles

I am trying to dynamically create sliders based on user input and struggling with saving values when they are changed. Below is the code snippet I have implemented so far. The issue I'm facing is that I cannot retrieve the value using event.target.val ...

Material Ui and react-router onClick event latency on handheld devices

My React application is currently using @material-ui/core v.1.2.1 and react-router 3.0.2, which I am unable to update at the moment. Whenever I click a button that handles navigation, there is a noticeable delay of around 2 seconds before it works. https: ...

Verify the ability to view a webpage

I am currently working on creating a method to check if data access is equal to next.data.access. Since it's an array, I cannot use the includes method. It would be enough for just one of the data access values in the array to return true. auth.guard ...

Navigating through JSON arrays with Node.js

I have been given the task of iterating through a complex JSON file that contains an array of JSON objects. I am finding it difficult to access the array object within the JSON file. Specifically, I need to access the "class-name" object from the JSON f ...

The jQuery each function in combination with the index function allows for

I'm struggling to make this jQuery script work properly: $(document).on('knack-scene-render.scene_126', function() { $('#view_498 > div.kn-list-content.columns.is-multiline').each(function(index) { if ($(this).eq(inde ...

Is it possible to submit a HTML5 form and have it displayed again on the same page?

Is it possible to simply reload the sidebar of a page containing an HTML5 form upon submission, or is it necessary to load a duplicate page with only the sidebar changed? I am unsure of how to tackle this situation; firstly, if it is achievable in this m ...

Encountering the error message "Cannot GET /" when trying to access the front page using Express.js

I am a beginner in Node.js. I have been learning through videos and documentation, and I started developing a site following an MVC structure. The node server appears to be working fine, but I am facing an issue where the front end displays 'Cannot GE ...

Unable to provide any input while utilizing npm prompts

After installing npm prompts, I encountered a strange issue. When trying to run the example code for npm prompts, I found that I couldn't enter any input at all. The underscore in the input field would blink for a few seconds, then the cursor would ju ...