Modifying the array structure will deselect all individual <Input> elements that have been iterated

Hoping to create a system for adding/removing sub-items with buttons that increment/decrement slots in an array, where input fields are automatically added and removed:

<div *ngFor="let item of itemsInNewOrder; let i = index">
  <input [(ngModel)]="itemsInNewOrder[i]" type="text" name="order" title="order" />
</div>

The functionality is there, but whenever a letter is typed into the input field, the element gets deselected and requires clicking back on it to add another letter. How can this be fixed?

javascripthtmlarraysangular

Answer №1

If you're struggling to understand change detection in Angular 2, the provided link offers a detailed explanation along with some helpful strategies.

When utilizing two-way binding like [(ngModel)]="itemsInNewOrder[i]" on the itemsInNewOrder array, Angular automatically updates the view as changes occur.

  1. Typing triggers model updates (itemsInNewOrder)
  2. Angular detects these updates
  3. The view is re-rendered with new form controls
  4. Since these are new controls, user input focus must be clicked after each character entry

To address this issue, consider removing two-way binding and instead listen for the blur event on each input field or explore alternatives from the linked resource above.

Example of listening to blur events:

<input (blur)="blurHandler(item,i)" type="text" name="order" title="order" />

Component method:

blurHandler(val:string,ndx:number) {
  this.itemsInNewOrder[ndx] = val;
}

For additional assistance, check out this resource as well:

Angular 2 change event - model changes

Answer №2

Why not consider encapsulating the values within objects? It's a way to keep your focus intact.

New Order Component:

itemsInNewOrder = [{value: 'Soda'}, {value: 'Burger'}, {value: 'Fries'}];

Template:

<div *ngFor="let item of itemsInNewOrder; let i = index">
    <input 
      type="text" 
      name="order" 
      title="order" 
      [(ngModel)]="itemsInNewOrder[i].value"/>
  </div>

Answer №3

The easiest solution to my problem was to familiarize myself with and utilize Angular 2's reactive forms module, a component of Angular 2. After incorporating this module, all the hurdles I was facing vanished.

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 angular.copy function to copy an array with a custom property

Let's use the example below to illustrate an issue: var ar = [4, 2, 3]; ar.$x = 'something'; var br = angular.copy(ar); console.dir(br); After copying ar to br, the $x property is no longer present. This is because when Angular copies an a ...

javascriptarraysangularjscopy

Display the Material UI Switch in an active state even when the "checked" value is set to false

While using Material UI Switches with Formik, I've encountered an issue. When I toggle the switch to 'enable,' it automatically sets the value in Formik to "true," and when I toggle it to 'disable,' it sets the value in Formik to " ...

javascriptmaterial-uiformik

Combining Angular with WordPress

I need to integrate an Angular ticket sales form onto the main page of my Wordpress site. What is the best method for accomplishing this? Should I consider using an iframe tag or are there other solutions that may be more effective? Thank you for your as ...

wordpressangular

Issue occurs when a circle element is not following a div element on mouse

Currently, I have implemented some jQuery code that instructs a div named small-circle to track my cursor movement. I discovered how to accomplish this by referencing a thread on stack overflow. I made slight modifications to the script to suit my specifi ...

javascriptjqueryhtmlcss

Converting a decimal Unicode to a string in Javascript/Node: a beginner's guide

In my database, I have Arabic sentences that contain decimal unicodes for quotation marks and other elements. For example, here is a sample text: "كريم نجار: تداعيات &#8220;كورونا&#8221; ستغير مستقبل سوق السي ...

javascriptstringunicodedecode

Customize the antd theme in a create-react-app project without the need to eject webpack

Struggling with customizing antd in my react app. I'm hesitant to mess with the webpack config.js file since I'm not well-versed in webpack. My goal is to avoid having a site that looks like a generic antd clone, but all my attempts at customizat ...

javascriptreactjsantd

How can I change the background color of a parent div when hovering over a child element using JavaScript

I am working on a task that involves three colored boxes within a div, each with a different color. The goal is to change the background-color of the parent div to match the color of the box being hovered over. CSS: .t1_colors { float: left; wid ...

javascripthtmlcsscolorshover

Changing a string to uppercase and lowercase

I am currently working on a software that takes a string, divides it, capitalizes the first letter of the first string, and capitalizes all letters in the second string. Below is the code snippet: var fullName = "ThEoDORe RoOseVElT"; function nameEditor( ...

javascriptstring

Implementing HTML tags in C# code

Below is an example of HTML script: <h1> This is heading one </h1> <p> This is paragraph. </p> I would appreciate any recommendations on how to add <html></html> tags to the above script using C#. ...

c#htmlvisual-studio-2010

What is causing the issue of subdomains not functioning properly in express.js?

Currently, I am conducting some local experiments and have made changes to my hosts file. Here are the entries: 127.0.0.1 example.dev 127.0.0.1 www.example.dev 127.0.0.1 api.example.dev Below is the code I am using: var subdomain = req ...

javascriptnode.jsexpresshosts

Incorporating Bootstrap 3 into an Angular 2 Application with Webpack

My Angular 2 project is utilizing the Webpack module bundler and I am looking to incorporate Bootstrap into the application using webpack. Bootstrap has been installed via npm, as reflected in my package.json file: "devDependencies": { "@angular/co ...

angularnpmwebpackextract-text-plugin

Aligning navigation text in a grid layout

I am currently working on evenly distributing my 8 navigation links across the navigation bar. Below is the HTML code for my navigation: <nav> <ul class="nav"> <li><a href="index.html">Home</a></li> < ...

htmlcssnavcentering

Struggling with getting React to successfully fetch data from an Express API. Any suggestions on how

I am having trouble with my fetch call to the express API. Even though I receive a response status of 200, I am still getting the index.html instead of the JSON data I need. Here is an overview of my setup: package.json "version": "1.0.0&qu ...

javascriptreactjsexpress

The Execution of a Function Fails When Passed to a Functional Component

My functional component accepts a function called addEvent, which expects an event parameter. The problem arises when I try to call this function from props within another functional component, as the function does not seem to execute: const onOk = () =&g ...

javascriptreactjsreduxreact-redux

What sets property binding with methods in Angular apart from using @Output() and EventEmitter?

Consider a scenario where I have a set of parent-child components in Angular structured like this: Child component class: export class ChildComponent { @Input() addTask:any; } Child component template: <button (click)="addTask('cleaning&a ...

angularevent-handlingparent-childproperty-binding

Troubleshooting error in WordPress: Changing innerHTML of dynamically created divs using JavaScript. Issue: 'Unable to set property innerHTMl of null'

I am struggling to modify the innerHTML of a "View cart" button using a dynamically generated div class on my Wordpress/Woocommerce site. In a previous inquiry, I was informed (thanks to Mike :) ) that since JavaScript is an onload event, the class changes ...

javascriptphpjqueryhtmlwordpress

What is the reason for the index.html file not connecting to the local .css files and .js file?

I'm currently using node.js to send an .html file that includes the following tags: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This is my personal profile website" /> <link r ...

javascriptcssnode.js

occupying half of the screen

Having trouble displaying two videos in an ionic grid. My goal is to have both videos take up the entire screen, with each occupying 50% height and 100% width. However, when I try to achieve this, the ion-row only takes up 50% of the screen and the video i ...

htmlcssionic-frameworkhtml5-video

Steps for importing JQuery into a custom DNN module

I have developed a custom DNN module that requires the use of certain JQuery plugins. I successfully loaded the plugins, but encountered the following error: Uncaught TypeError: undefined is not a function imagesloaded.js?cdv=18:93 Uncaught TypeError: ...

javascriptjqueryasp.netdotnetnukedotnetnuke-module

React 18 doesn't trigger component re-rendering with redux

In my code, I have implemented a custom hook to handle global data fetching based on user authentication. Here is an example of the hook: const userState = useSelector(state => state.user.state) useEffect(() => { if(userState === "authentic ...

javascriptreactjsreduxnext.jsuse-effect