Automatically Parse Value by 100 in Angular FormGroup

Within my Angular form group, I have 3 fields. One of these fields serves as a tool for the user, automatically calculating the value based on another field. Essentially, when a user inputs a number, the tool field displays that value divided by 100.

Here is the structure of my form:

formGroup = new FormGroup({
        Buildyear:           new FormControl(this.buildyear, [Validators.minLength(4), Validators.maxLength(4)]),
        Areasize:            new FormControl(this.areasize, [Validators.required] ),
        Areasize_divided:    new FormControl(''),
     });

The "Areasize_divided" field takes the value of "Areasize" and divides it automatically. Initially, there is a default value in this field, but if the user updates "Areasize", the division in "Areasize_divided" should reflect that change. Conversely, if the user inputs a value into "Areasize_divided", "Areasize" will be multiplied by 100.

What would be the most effective approach to implement this functionality?

javascriptangulartypescriptcalculated-field

Answer №1

To ensure that your controls stay in sync, it is important to monitor form control changes and adjust other controls as needed. 

formGroup.get('Areasize')
  .valueChanges
  .subscribe(value => formGroup
    .get('Areasize_divided')
    .setValue(isNaN(value) ? 0 : value / 100)
  );

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

vuejs mounted: Unable to assign a value to an undefined variable

When I try to run the function below upon mounted, I encounter an error: "Cannot set the property 'days' of undefined" Here is my code snippet: function getDays(date) { this.days = (new Date()).getTime() / ...

javascriptvue.js

Testing abstract class methods in Jest can ensure full coverage

In my project, I have an abstract generic service class. export default abstract class GenericService<Type> implements CrudService<Type> { private readonly modifiedUrl: URL; public constructor(url: string) { this.modifiedUrl = ...

javascripttypescriptjestjs

Is there a discrepancy in performance when running a function on an individual element versus a group of elements within jQuery?

Imagine having the choice between applying a function to an individual DOM element or a list of them: For Individual Elements: $('#element1').click(function () { $(this).hide(); return false; }); $('#element2').click(functi ...

javascriptjqueryoptimization

Ionic 2: Trouble adding a component to a page

I have successfully created a new component and added it to my app, but I am facing an issue where an error message keeps appearing when I try to include it in my page. No provider for MyExample Even though I have already added the component to the app.m ...

angularionic2angular2-components

Navigating between two intervals in JavaScript requires following a few simple steps

I have created a digital clock with a button that switches the format between AM/PM system and 24-hour system. However, I am facing an issue where both formats are running simultaneously, causing the clocks to change every second. Despite trying various s ...

javascripthtml

transferring a string parameter from PHP to a JavaScript function

I have been searching for a way to transfer a string (stored as a variable $x) from PHP to JavaScript. I came across several code solutions, but I am wondering if these strings need to be declared as global variables? Even after declaring it as a global va ...

phpjavascript

Using Regular Expressions for Validation

As a designer trying to set up a payment page without strong developer skills, I've hit some roadblocks. The payment company gave me guidance that involved using regular expressions for validating the 'AMOUNT' field, but my attempts to modif ...

phpjavascriptregexvalidation

Could someone help clarify this issue within a React project?

I've encountered an issue with a react task and I could use some clarification. // React is loaded and is available as React and ReactDOM // imports should NOT be used class Input extends React.PureComponent { render() { let {forwardedRef, ...ot ...

javascriptreactjslogical-operators

An uncaught error occurred in ReactJs while trying to read the property 'map' of an undefined variable within the {Component} component

As I pass my array to the props of the sidebar component and try to access it in my child component... After saving the code and checking the browser, an error message pops up: https://i.stack.imgur.com/6cPY8.png import React, { Component } from 're ...

javascriptarraysreactjs

Checkbox selections persist when navigating between pages

I am currently working with Angular 9 and I have a list of checkboxes that need to default to true when displaying certain data. If one of these checkboxes is unchecked, it should trigger the display of specific information. The issue I am facing is that o ...

angulartypescriptcheckboxlistngoninit

Angular Material Table displaying real-time information

Recently, I've delved into Angular and have been experimenting with creating a dynamic table to showcase data. Currently, I have managed to get it partially working with static data. I drew inspiration from this particular example: https://stackblit ...

angulartypescript

Utilizing a single delete function for a post request in jQuery or a PHP request

Seeking guidance on how to achieve a specific task. I have a controller that loads a view containing a table listing pages from my database. Each row in the table has an icon that, when clicked, performs one of two actions. If the user does not have javas ...

phpjavascriptjqueryjsoncodeigniter

Utilize TypeScript to access scope within a directive

Is there a way to access the controller's scope properties using my custom TypeScript directive? For example, in this snippet below, I am trying to retrieve and log scope.message: /// <reference path="typings/angularjs/angular.d.ts" ...

angularjstypescript

What is the best location to create the content for a sidebar?

Currently in the process of building my new website using express. The layout consists of various "sections" such as a blog, project information, and more. I want to have a unique sidebar next to the main content for each section. For instance, in the "blo ...

javascriptmodel-view-controllernode.jsexpress

Encountering build errors with Angular 2 version 2.0.0-beta.9

I recently updated my Angular2 project in visual studio from version 2.0.0-beta.0 to version 2.0.0-beta.9 and encountered build errors. The first error message reads as follows: Cannot find name 'SetConstructor'. This issue is occurring with ...

angular

Utilize a dynamically defined union type to create a versatile callback function

I'm currently working on creating a message subscription function. A basic version without types is shown below: function createMessage(message) { postMessage(message) } function addSubscriber(messageType, callback) { handleNewMessage(message =&g ...

typescript

Optimizing performance: Making the most of mongoose updateMany middleware

PROBLEM SOLVED: SOLUTION PROVIDED BELOW I have a piece of code where I am updating elements one by one: //registerCustomers.js const CustomerRegistrationCode = require("../models/CustomerRegistrationCode"); const setRegCodesToUsed = async (regC ...

javascriptnode.jsmongoosemiddlewaremongoose-schema

Using SetInterval function in conjunction with jQuery's .each() method

I'm looking to cycle through a group of divs and perform random actions at various intervals. I'm trying to use the function below, but the console.log always returns the same object and integer for each iteration. What would be the correct way t ...

javascriptjqueryfunction

ParcelJS takes a unique approach by not bundling imported JavaScript libraries

My NodeJS app, which is a Cloudflare Worker, seems to be having trouble with bundling the 'ping-monitor' dependency. In my main typescript file (index.ts), I import the handler module and the first line reads: const Monitor = import('ping-m ...

javascriptnode.jstypescriptparceljscloudflare-workers

Update the array state based on the selection of checkboxes and user input in real-time

In my current project using react js, I am working on a UI development task where I need to create a dynamic table based on data fetched from an API. Each row in the table includes a checkbox and a text input field that are dynamically generated. My goal i ...

javascriptarraysreactjsuser-interface