Initial binding of Angular2 ControlGroup valueChanges event

My form contains <input type="text"> elements and I've noticed that ControlGroup.valueChanges is triggered during initial data binding when using [ngFormModel] and ngControl.

As a result, it gives the impression to the user that the form has already been modified upon loading.

Should I consider using a different observable to accurately track changes made by the user?

I'm working with Angular 2 RC3 and importing the following version for forms:

import {ControlGroup, Validators, FormBuilder} from '@angular/common';
formstypescriptangularobservable

Answer №1

It seems like that's just the way it goes, but if your goal is to specifically monitor changes made by a user, then make sure to utilize either ControlGroup.dirty or formControl.dirty along with the changes Observable.

ControlGroup.valueChanges.subscribe(() => {

 if(ControlGroup.dirty){
   console.log('User initiated this change.');
 } 
 else {
   console.log('This change occurred automatically, without any User interaction.');
 }

})

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

Make sure to declare rest parameters first when using Typescript

I am dealing with a function that takes in multiple string arguments and one final argument of a complex type, which is called Expression. This particular code looks like this in JavaScript: function layerProp(...args) { const fields = args.slice(0, -1) ...

javascriptarraystypescriptrest-parameters

Tips on obtaining upload percentage and showcasing it on a progress bar

Hey there, I'm currently working on uploading a file to the backend and I'm looking for a way to show the upload percentage in a progress bar: Below is the code snippet for adding the file through TypeScript component: this.updateDocumentSub = t ...

angularfile-upload

find your way to an angular component within a different module

Currently, I am utilizing this template and running into an issue with navigating from the login component to a different component associated with another module. I have attempted using both this.router.navigate(['myRoute']) and this.router.nav ...

angularangular6routerngroute

Guide to setting up a universal error handling system compatible with forkJoin in Angular 6

I recently implemented error handling in my app following the guidelines from the official Angular 6 tutorial in rest.service.ts ... return this.http.get(url).pipe(catchError(this.handleError)); } private handleError(error: HttpErrorResponse) ...

angularrxjs6

Troubleshooting a Pulumi script in Azure using Typescript and encountering difficulties with function writing

My background is in using terraform, but now I am trying out Pulumi/typescript for the first time. In my codebase, I have two files - index.ts and blob.ts. The create function in blob.ts is responsible for creating a storage account, resource group, blob ...

typescriptazurepulumi

The ngOnChanges method fails to exhibit the anticipated modifications in a variable

Trying to grasp the concept of the ngOnChanges() callback, I created an example below. Despite having values for the attributes title and content in the Post interface during compile time, I do not see any logs from ngOnChanges. Please advise on the corre ...

javascriptangulartypescriptngonchanges

The build error TS1036 is thrown when a function with a return statement is moved to index.d.ts, even though it worked perfectly in a standard TS file

In my project using Node v14.x and StencilJS (React) v2.3.x, I encountered an issue with a test-helper file containing a function that converts string-arrays to number-arrays: export function parseNumericStringOrStringArrayToIntegers(value: string | (strin ...

typescriptrxjstypescript-typingsstenciljsstencil-component

Having trouble triggering a click event with React testing library?

I am working with a <Select/> component as shown in the image below. App.tsx import React, { useState, ChangeEvent } from "react"; import MySelect from "./MySelect"; export default function App() { const [countryCode, setCoun ...

javascriptreactjstypescriptjestjsreact-testing-library

Issue with identifying the standard property `form.invalid` in a template-based form during testing

In my pursuit to test a template driven form, I aim to ensure that the user enters a name by initially disabling the form's button. This is achieved through the use of the 'required' property on the input field for the name. To implement th ...

angularjasminekarma-jasminekarma-runner

Modifying pagination page box color in Angular material

Can anyone provide instructions on how to customize the color of the pagination drop down menu? View example image here ...

angularangular-materialpagination

Upgrading to TypeScript: How to resolve issues with const declarations causing errors in JavaScript style code?

Currently, I am in the process of migrating a decently sized project from JavaScript to TypeScript. My strategy involves renaming the .js files to .ts files, starting with smaller examples before tackling the larger codebase. The existing JavaScript code i ...

typescript

Sending variables from a main page to a nested component

Currently facing an issue with the routing mechanism in Angular 9. Specifically, I am struggling to capture the parameter inside the BuildingDetailComponent even though it is present in the URL displayed in the address bar. In the Parent component, my rou ...

angulartypescriptangular-activatedroute

Explicit final argument in TypeScript

Is it feasible to define a function in TypeScript 2.7.2 and above with variable parameters, but ensuring that the final parameter has a specific type? I am attempting to craft an ambient TypeScript declaration for a JavaScript library that utilizes functi ...

typescript

Receiving an error in TypeScript stating that the property or data does not exist on the type for Vue props

I've recently integrated TypeScript into my Vue project, and now I'm encountering an error every time I try to access a value in props or data: 37:46 Property 'activity' does not exist on type '{ props: { activity: { type: ObjectC ...

typescriptvue.js

Here's a unique rewritten version: "Achieving a looping carousel with autoplay in Angular 2+ using with

Could someone provide recommendations for an image carousel that is compatible with angular 8? I would also like to know how to customize the images inside the carousel specifically for small devices. Thank you in advance! ...

jqueryhtmlangularnpmnpm-package

Exploring ways to display all filtered chips in Angular

As a new developer working on an existing codebase, my current task involves displaying all the chips inside a card when a specific chip is selected from the Chip List. However, I'm struggling to modify the code to achieve this functionality. Any help ...

htmlangulartypescriptmultidimensional-arrayangular-material

Exploring potential arrays within a JSON file using TypeScript

Seeking guidance on a unique approach to handling array looping in TypeScript. Rather than the usual methods, my query pertains to a specific scenario which I will elaborate on. The structure of my JSON data is as follows: { "forename": "Maria", ...

javascriptarraysjsontypescript

Typescript is failing to perform type checking

I'm encountering an issue while trying to utilize TypeScript type checking with the following code snippet: abstract class Mammal { abstract breed(other: Mammal); } class Dog extends Mammal { breed(other: Dog) {} } class Cat extends Mammal { ...

typescripttypechecking

"Issue with default select value in Angular using ngModel - one select element not setting default value, while another works fine

Why is this functioning properly? File: myComponent1.html <select id="BisMonat" class="form-control" [(ngModel)]="currentmonatbis"> <option [value]="01">Januar</option> <option [value]="02">Feb ...

angularngmodel

Leveraging Angular environment configurations for workspace libraries

I've been experimenting with Angular's latest version (>6) and am delving into the concept of using workspaces. One interesting feature is the ability to generate a library project with a simple CLI command: ng generate library api In my de ...

angularangular-cliangular6angular-cli-v6