Resetting dynamic rows in Angular 6 when new ones are added

How to implement the purchase HTML form?

<div class="d-flex justify-content-center align-items-center">
  <div class="col-md-12 border">
    <div class="card-header header-elements-inline">
      <h4 class="card-title">Add Purchase</h4>
      <button [mat-dialog-close]="true" type="button" class="bootbox-close-button close" data-dismiss="modal"
        aria-hidden="true">×</button>
    </div>

    <form action="" #addPurchaseForm="ngForm" class="purchaseForm" (ngSubmit)="addPurchase(addPurchaseForm)" method="POST">
    // Add your form fields here
    </form>

  </div>
</div>

Implementing the add purchase component:

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-add-purchase',
  templateUrl: './add-purchase.component.html',
  styleUrls: ['./add-purchase.component.css']
})
export class AddPurchaseComponent implements OnInit {

  // Initializing necessary variables
  
  constructor(@Inject(MAT_DIALOG_DATA) private addPurchaseData : any) { }

  ngOnInit() {
    // Logic for initialization
  }

  // Function to add new purchase detail row
  addNewPurchaseDetail(){
    // Add logic here
  }

  // Function to remove a purchase detail row
  removePurchaseDetail(index){
    // Add logic here
  }
}
  • Need help with adding new purchase details row without resetting values

  • Values are getting reset when adding new rows

  • Seeking guidance on the right approach

  • Newbie in Angular, looking for assistance

Values persist in console log but rows are getting reset, seeking solutions

Answer №1

Identified the problem:

The input name should follow this format:

<input name="reciept_no[{{i}}]" [(ngModel)]="purchaseDetails.reciept_no"  #reciept_no="ngModel" type="text" required class="form-control">

I originally had it set up like this:

<input name="reciept_no" [(ngModel)]="purchaseDetails.reciept_no"  #reciept_no="ngModel" type="text" required class="form-control">

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

Can each `InstancedBufferGeometry` instance have its own set of unique vertex colors?

Is it possible to assign different vertex colors to each instance of InstancedBufferGeometry? const xRes = 3; const yRes = 2; const numVertices = xRes * yRes; geometry = new THREE.InstancedBufferGeometry(); geometry.copy(new THREE.PlaneBufferGeometry(3, 2 ...

I am interested in transmitting a variety of information from a form to a database

Would it be possible for me to send a message with just my name? Any help would be greatly appreciated. (https://i.sstatic.net/ZvF8F.png) ...

Testing the Compatibility of Angular JS and Angular 8 in a Hybrid Application

I am currently working on a hybrid application using AngularJS and Angular 8. The new components I create in Angular need to be downgraded for use in AngularJS. Here is a snippet of the module code: @NgModule({ // Declarations and Imports providers ...

Guide on changing an HTML element attribute using Python and Selenium

My dilemma lies in the fact that I need to modify the image source using selenium, but it lacks an id or class. <div id="mbr-content"> <div class="nope" some random stuff> <script> </script> <div cla ...

Include a selection of images within a popover box

I am currently working on a component that contains various experiences, each with its own popover. My goal is to display an array of images within each popover. Specifically, I have different arrays of images named gastronomiaExperience, deportesExperien ...

Automatically open the first panel of the Jquery Accordion

Is there a way to automatically have the first panel in my JQuery accordion open when all panels are initially closed? Here is the HTML code for my accordion: <div class="accordionx"> <div class="acitemx"> <h3>First Panel</h3> ...

In Typescript, it is not possible to use generics as a function parameter in a

Looking for a solution regarding passing the union of two specific samples of generics to a function. The function in question is as follows: function myCommonFunc<T>({ data, render, }: { data: T; render: (data: T) => number; }) { return ...

Error message in previous React-Redux project: nativeEvent.path is undefined

Currently, I am following a detailed guide to create a character sheet using React-Redux. https://www.youtube.com/watch?v=cPlejG83B1Y&list=PLJ-47dnNMd_jke6l27GmEiDk5XJGcr_HE&index=5 I have some basic knowledge of React from a tutorial I started y ...

Is there a way to limit user input on an editable material-table to prevent the entry of characters, special characters, or negative numbers?

I am currently working with an editable material-table, and I would like to restrict the user from entering anything other than numbers in one of the columns. Unfortunately, I couldn't find any information about this in the validation section on the m ...

There was an issue with the second level object in the response from the Node.js

Here's the scenario I'm dealing with: app.post('someUrl', function (req, res) { var r = res.data; var a = {}; a.name = r.name || ""; a.someotherKey : { id: r.otherKey.id || "" } }); The issue arises when ...

Failure to update HTML with AJAX request

I am currently working on a form that calculates shipping costs based on the user's postcode input. The process involves retrieving the user's text input of the postcode, fetching the shipping cost for that specific postcode using PHP, and then u ...

The e.currentTarget attribute in Material UI buttons is a key element that

I am facing an issue with implementing three tabs and buttons in my project. Each button should display a corresponding message when selected I have tried using e.currentTarget but no success so far. Can someone guide me on how to resolve this problem? You ...

Ways to refine date results using JavaScript

Here is the JavaScript code I have: $(".datepicker").datepicker(); $(".datepicker-to").datepicker({ changeMonth: true, changeYear: true, maxDate: "0D" }); This code ensures that the date selected cannot be beyond the cur ...

How to implement a distinct click event for input elements containing a pipe character in Angular

I have developed an innovative Elevator application that features a unique elevator component displaying the current floor value in a box. You can see how it looks here: https://i.stack.imgur.com/h3JW5.png In order to replace the numerical floor values w ...

How can I make a div container clickable when it is wrapped around a react-router Link component?

I am facing a challenge in my react project and I have outlined the issue below. I have enclosed all components with react-router Link. There are certain sections of code where I require the Link for navigation purposes, but there are also instances where ...

What is the best way to make a trail follow my shapes on canvas?

In my current project, I have implemented a feature where shapes are generated by spinning the mouse wheel. One specific shape in focus is the triangle, but other shapes follow the same generation process. The goal is to create a trail that slowly fades ...

JQuery is facing difficulty in animating a div following the completion of a "forwards" css animation

Check out this example: http://jsfiddle.net/nxsv5dgw/ A div appears on the stage and a CSS animation is applied to it. However, when attempting to use JQuery to animate the same properties that were animated by CSS, it seems to no longer work properly. ...

Execute xrmquery.update to update the date field in CRM

I'm developing a custom TypeScript page for a scanning module. I need to update a datetime field on a CRM record when a code is scanned. Check out my code snippet below: XrmQuery.update(x => x.cgk_bonuses, this.bonusId(), ...

Issue Encountered During Angular 4 Production Build - BROWSER_SANITIZATION_PROVIDERS

When running the build command shown below: ng build --prod --aot An error is encountered (a standard ng build works fine) ERROR in Illegal state: symbol without members expected, but got {"filePath":"D:/Projects/app/node_modules/@angular/platform-b ...

Enhancing your comprehension of JavaScript

What method does this script use to determine the current day of the week as Tuesday? let currentDate = new Date(); let currentDay = currentDate.getDay(); let daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] ...