How to utilize ngFor for multiple inputs in Angular 4

Apologies for my poor English, I'll do my best to explain my issue. Here's the problem:

I'm using ngFor on an Input element, but when I enter data, it gets repeated in all the fields and I can't figure out why.

      
<div *ngFor="let itra of itras; let n=index " class="col-md-4">
<input type="number" name="{{n}}" #{{n}} [(ngModel)]="ihi.Itra[n]"  [attr.placeholder]="itras[n]"  class="form-control" max="999999">
</div>
import {Ihi} from '../models/ihi';
export class AddDocumentsComponent implements OnInit {
public ihi: Ihi;
public itras = ["1", "2", "3"];

This is the Angular model:


export class Ihi{
constructor(
public _id: string,
public Idoc: string,
public Fech: string,
public Hini: string,
public Hter: string,
public Luga: string,
public Itra: string
){}}

The data is sent to an API built with MEN stack.


var ihiSchema = Schema({
Idoc:{type: Number},
Fech:{type: String},
Hini:{type: String},
Hter:{type: String},
Luga:{type: String},
Itra:[{type: Number,minlength:6,maxlength:6}]},{versionKey: false});

While testing with Postman, the API successfully receives multiple "Itra" parameters, but I'm struggling to achieve the same with Angular. Any help with this issue would be greatly appreciated.

Answer №1

What is the reason behind your choice of [(ngModel)]="ihi.Itra[n]"? It appears that you are binding elements to various characters within the same string based on your model. Perhaps a more suitable approach would be to use [(ngModel)]="itras[n]", or if you have an array of Ihi objects, consider using [(ngModel)]="ihi[n].Itra"

Answer №2

Perhaps consider this alternative suggestion? It's important to ensure that the ngModel and name field match in order to achieve your desired result.

  <div *ngFor="let itra of itras; let n=index " class="col-md-4">
    <input type="number" name="itra" [(ngModel)]="itra"   class="form-control" >
  </div>

Don't forget to

import {FormsModule} from '@angular/forms';
in app.module as well.

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 jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

Discovering the CSS generated by an Angular framework

Recently, a white border appeared around my Angular application and after using the browser's inspector, I discovered that the body tag had an 8pt margin set on it. Despite my efforts, I could not pinpoint where this margin was coming from. Eventually ...

AngularJS issue: [filter:notarray] The expected data type was an array, but instead received: {} while using a filter within an ng

I'm working on populating an HTML table by making an angular request to an API using the ng-repeat directive. The HTML page loads first, and then the data is fetched from the API to fill the table once the response is received. When I include a filter ...

Utilizing Angular routing in HTML5 mode within a Node.js environment

While I've come across other solutions to this problem, they all seem to have drawbacks. One option leads to a redirect, which could be disastrous for my front-end application that relies on Mixpanel. A double-load of Mixpanel results in a Maximum Ca ...

Having issues with the right margin in HTML5 canvas and struggling to remove the scroll bar

I am struggling with adjusting the margins of my canvas to ensure equal spacing on both sides without any horizontal scroll bars. Desired Outcome: Equal margin on both sides of canvas without any horizontal scroll bars. Issue: The margin-right property i ...

Transferring a dynamic HTML file created using R's animation package onto a WordPress platform

After using the animation package in R to create an HTML file, I'm facing some challenges uploading it to my WordPress blog. It appears that additional js or css files may be required for proper functionality, but I'm uncertain about the process. ...

Verify if a given string exists within a defined ENUM in typescript

I have an enum called "Languages" with different language codes such as nl, fr, en, and de. export enum Languages { nl = 1, fr = 2, en = 3, de = 4 } Additionally, I have a constant variable named "language" assigned the value 'de'. My g ...

Alert popup onclick feature is malfunctioning

SOLVED: I finally figured out the issue and it is now working perfectly. I had to manually switch to Chrome instead of using the Brackets live viewer. I want an alert box to pop up when the "Home" link is clicked on my website. I tried creating a separate ...

What are the steps for integrating mongoDB with an angular2 application?

I currently have my angular2 & mongoDB setup successfully. While I've managed to read JSON files using the HTTP service, my goal is to create a fully functional application with database connectivity as well. I'm seeking advice on how to con ...

Substitute Ajax.ActionLink with a different method

Hey there, I have an Ajax Action Link set up that is working perfectly fine. It displays some text from a partial view when the link is clicked. However, I want this text to be shown automatically when the page loads, without the need to click on the actio ...

Tips for activating the next tab using the <a> or <button> element in Materialize:

<div class="col s12"> <ul class="tabs"> <li class="tab col s4"><a href="#test1" class="active">tab1</a></li> <li class="tab col s4"><a href="#test2">tab2</a></li> <li class="tab c ...

Updating the displayed data of an angular2-highcharts chart

I am facing an issue with rendering an empty chart initially and then updating it with data. The charts are rendered when the component is initialized and added through a list of chart options. Although the empty chart is successfully rendered, I am strugg ...

I am facing an issue with my $.getJSON() script not functioning as expected

Having trouble getting my JSON / AJAX script to work. I've searched everywhere but can't find a clear explanation of how to use $.getJSON. Can someone please help me out and explain why my code isn't functioning? I suspect the issue lies wit ...

The SetCookie header was not properly stored within the system

Currently, I am developing a web application using node/express.js for the backend API and Vue.js for the frontend. Regarding authentication, I am implementing JWT and sending the value through an HttpOnly cookie. However, despite seeing the "Set-Cookie" ...

Encountering a process.tick error while attempting to organize a queue of http requests

As I was working on my web application, I encountered a challenge with my Request object. It seemed to be queuing up individual HTTP requests and processing them sequentially using process.nextTick. However, an error has surfaced that I am struggling to tr ...

Toggling classes in Angular for dynamic elements can easily be achieved by using the

I am trying to toggle between the right and wrong classes based on boolean values from an array. The goal is to add a red background class for incorrect answers and a green background class for correct answers. Unfortunately, I'm having trouble getti ...

Angular updating the parent model from within the transclude scope

I am puzzled by the concept of Angular transclude scope. I am attempting to create a collapsible directive, but it seems that binding inside the transclude scope does not affect the model of the parent unless I utilize an object like 'data'. < ...

Challenge encountered with Promise failing to resolve despite multiple retry attempts

I've been struggling with Promises as a beginner for the past few days. I need to make an API call and check if there is a response. If not, I have to retry calling the API a configurable number of times. I attempted the following code, but I'm u ...

Tips for accessing a variable located in a different directory

I'm facing some confusion regarding creating a global variable that can be accessed in another file. Currently, I have a chat and login folder setup. Within the login folder, there are three possible users to choose from. When a user clicks on one of ...

Encountering an issue with Google Picker API and Angular2: Error in executing 'postMessage' on 'DOMWindow' is preventing successful integration

Looking to incorporate the Google Picker API into my Angular 2 application. This is my HTML Code: <h1> {{title}} </h1> <button (click)="onApiLoad()">Click Me!</button> This is my Component Typescript Code: import { Component } ...