Tips for Connecting Interpolation Data with ngModel in Angular 6

  • I'm facing an issue with subtracting two values and binding it to ngModel. I am receiving null values when sending data to a post request.

Please refer to this image which shows my output

  • Despite using two bindings, the value is not updating. It keeps showing 'Pending_amount' as a null value.

    <input type="number" matInput placeholder="Pending Amount [(ngModel)]='paymentmodel.pending_amount' [(value)]="paymentmodel.total_amount - paymentmodel.advance_amount" name="pendingamount">

  • For example: paymentmodel.total_amount = 10 paymentmodel.advance_amount = 5 paymentmodel.pending_amount = 5

angulartypescript

Answer №1

Welcome to the wonderful world of stack overflow!

When utilizing two-way binding, remember that it both sets and retrieves the value.

Avoid using the value property in this case. It's best to remove it altogether.

Have you assigned a value to pending_amount anywhere else besides the value property?

If not, consider adding the following code snippet to your component:

get pending_amount(): number {
  return paymentmodel.total_amount - paymentmodel.advance_amount;
}

This will calculate the amount and store it in a local pending_amount property. Note that this is distinct from the paymentmodel's pending_amount property.

Then adjust your binding as shown below:

<input type="number" 
       matInput placeholder="Pending Amount" 
       [(ngModel)]='pending_amount'
       name="pendingamount">

This will now bind to the local value correctly.

Give it a try and see if it solves your issue!

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

Arranging a dictionary by its keys using Ramda

My task involves manipulating an array of items (specifically, rooms) in a program. I need to filter the array based on a certain property (rooms with more than 10 seats), group them by another property (the area the room is in), store them in a dictionary ...

javascripttypescriptramda.js

Currently, my goal is to upload a photo using Cloudinary's post API without relying on the Cloudinary SDK

Recently, I have been exploring the integration of cloudinary with Angular. In my quest to upload an image to cloudinary without using the SDK, I came across the option to do so via the post API. However, my attempts with the following code snippet were un ...

angularfile-uploadcloudinary

Tips for maintaining the selected state of a row using Typescript and the option tag

Here is the code for a dropdown: <div class="col-md-6"> <label for="inertiaStart" style="float: left; width: 17%;">Inertia Start</label> <select ng-model="selectedShiftChannel" style="float: left; width: 70%;height: 26 ...

htmlangulartypescript

Passing data from getServerSideProps to an external component in Next.js using typescript

In my Index.js page, I am using serverSideProps to fetch consumptions data from a mock JSON file and pass it to a component that utilizes DataGrid to display and allow users to modify the values. export const getServerSideProps: GetServerSideProps = async ...

javascriptreactjstypescriptnext.jsmaterial-ui

How can you develop a custom language for Monaco Editor in an Angular project?

I am attempting to develop a custom language with auto-complete (intellisenses), but I am facing challenges. Can anyone provide assistance in achieving this? Code https://stackblitz.com/edit/angular-7-master-emjqsr?file=src/app/app.module.ts ...

javascriptangularmonaco-editor

What is the process of displaying events from components within ng2 submodules?

My dilemma involves two components with straightforward output events and handlers. I am attempting to pass a value from a child submodule to a component within my app.module. Here is the snippet of code from my app.component.ts: @Component({ selector: ...

angulartypescriptangular2-directives

Upon the second click, the addEventListener function is triggered

When using the window.addEventListener, I am encountering an issue where it only triggers on the second click. This is happening after I initially click on the li element to view the task information, and then click on the delete button which fires the eve ...

javascripthtmlcssnode.jstypescript

Tips for importing several makeStyles in tss-react

When upgrading from MUI4 to MUI5 using tss-react, we encountered a problem with multiple styles imports in some files. const { classes } = GridStyles(); const { classes } = IntakeTableStyles(); const { classes } = CommonThemeStyles(); This resulted in ...

javascriptreactjstypescriptmaterial-uitss

Running a function before triggering a refresh in Angular 2/4

When a user clicks or presses the F5 button on an HTML page, the page refreshes. However, before the refresh occurs, I want to execute a function or display a simple alert. The user can trigger a refresh by clicking the refresh button, pressing F5, or usi ...

angulartypescript

What is preventing me from upgrading the 11th angular to the 12th version?

When I visited update.angular.io, it instructed me to input the following command: npx @angular/cli@12 update @angular/core@12 @angular/cli@12 However, upon executing the command, I encountered the following error: npm ERR! cb.apply is not a function npm ...

node.jsangularnpmangular-cliyarnpkg

"Enhancing Your Web Pages: Generating and Inserting HTML Elements on the Fly Using

For my master's degree project, I am working on developing a shopping web app. The issue I am facing is that I need assistance with creating a div and adding it to the HTML file with an ID matching the category name from the .ts file when the addCate ...

htmlangularbootstrap-4

Ways to test the reloading of window.location in angular 12 unit testing?

One of the functions in my Angular project is: reloadPage(): void { window.location.reload(); } Whenever I need to reload the page, I used to call this function. Now, I'm attempting to implement unit testing for this function, but it's not wo ...

angularunit-testingangular-unit-testangular12

Encountered an error while trying to install Npm, receiving a message stating "EINVAL: invalid argument

I have integrated the frontend-maven-plugin into my Java project to run my Angular App. The plugin configuration is as follows: <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-mav ...

javaangularmavennpm

Can a button be incorporated into an accordion feature using DevExtreme Angular?

I am using devextreme-angular and I would like to include two buttons such as DELETE and EDIT to accordion. The accordions receive the posts I typed so i have title and content for each accordion. What I need now is to add these buttons to each of the cont ...

angulardevextreme

Creating a type or interface within a class in TypeScript allows for encapsulation of

I have a situation where I am trying to optimize my code by defining a derivative type inside a generic class in TypeScript. The goal is to avoid writing the derivative type every time, but I keep running into an error. Here is the current version that is ...

typescriptclassgenericstypesinterface

The enigma of the Angular2 Object's Undefined nature

Encountering an "object undefined" error when trying to access the object of the Service Component. Interestingly, hard coding the data directly into a JavaScript variable works fine and shows the type as "object Array." Data.json [ { "id": ...

typescriptangular

Angular 6: Rendering a graph within a CSV file

I have successfully implemented ng-2 chart to display data in a chart format on my web application. Now, I am looking for a way to export this data as a CSV file. Is there a method to convert the data displayed in a chart format on the web app into a C ...

angularexport-to-csvng2-charts

Combine observables from an id using rxjs in Angular with Firestore

In my Firestore database, I have stored information about people and their pets. Each pet is linked to its owner through an owner ID. // Collection / DocumentID: {data} persons / 'person1': { name: 'Romea' } persons / 'person2&ap ...

angularfirebasegoogle-cloud-firestorerxjsangularfire

Transform **kerry James O'keeffe-martin** into **Kerry James O'Keeffe-Martin** using TypeScript and Java Script

Is there a way to capitalize names in both TypeScript and JavaScript? For example, changing kerry James O'keeffe-martin to Kerry James O'Keeffe-Martin. ...

javascripthtmltypescript

Integrating a title field into every p-column with ng-template

I am exploring ng-templates for the first time. I have managed to customize each column to display names accurately, but I am encountering an issue. I would like to incorporate a title field in order to show a tooltip with the full name when hovering over ...

htmlangulartemplatesprimeng