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

Unexpected behavior noticed with Angular Material 2 Reactive Forms: the mat-error directive does not display when validating for minLength. However, it functions correctly for email and required

Try out this Stackblitz example: https://stackblitz.com/angular/nvpdgegebrol This particular example is a modified version of the official Angular Material sample, where the validation logic has been altered to display the mat error for minLength validati ...

angularangular-materialangular-material2angular-reactive-forms

What is the process for launching a TypeScript VS Code extension from a locally cloned Git repository?

Recently, I made a helpful change by modifying the JavaScript of a VSCode extension that was installed in .vscode/extensions. Following this, I decided to fork and clone the git repo with the intention of creating a pull request. To my surprise, I discove ...

gittypescriptvisual-studio-codevscode-extensions

Nest may struggle with resolving dependencies at times, but rest assured they are indeed present

I've encountered a strange issue. Nest is flagging a missing dependency in a service, but only when that service is Injected by multiple other services. cleaning.module.ts @Module({ imports: [ //Just a few repos ], providers: [ ServicesService, ...

node.jstypescriptnestjs

The necessity for one type argument is apparent in a generic type, particularly when it is divided into a distinct type

I have a simple scenario that resembles the following and is functioning perfectly: export interface CustomState { someBool: boolean; status: string; } function checkStateDifference<K extends keyof CustomState>(props: { stateKey: K, value: Custo ...

typescripttypescript-typingstypescript-generics

An effective method to utilize .map and .reduce for object manipulation resulting in a newly modified map

Here's an example of what the object looks like: informations = { addresses: { 0: {phone: 0}, 1: {phone: 1}, 2: {phone: 2}, 3: {phone: 3}, 4: {phone: 4}, 5: {phone: 5}, }, names: { 0 ...

javascripttypescriptloopsreducearray.prototype.map

The identifier "id" is not a valid index for this type

The code snippet below demonstrates the similarities and differences between the functions addThingExample2 and addThing. While addThingExample2 directly uses the union type Things, addThing utilizes a generic parameter THING extends Thing. The expression ...

typescripttypescript-generics

Having trouble creating a dynamic form in Ionic

I am in need of creating a dynamic form. Here is the desired output: {"laboratories":[{"colArr":[{"col":"11"},{"col":"22"},{"col":"33"}]},{"colArr":[{"col":"5"},{"col":"423"}]}]} The key laboratories represents the number of rows. Each row contains the k ...

angularformsionic-frameworkionic3angular4-forms

Having issues with Angular 2/4 unable to read an object within the initForm() function

In the process of creating an edit form using Angular, I am facing a problem with understanding the lifecycle of the object retrieved from my backend server. After making a call to my service in ngOnInit(), I receive valid data. However, when I assign this ...

angularangular2-servicesangular2-httpangular2-observables

Surprising literal found at the second position

Encountered an error while trying to display a date as an array on an HTML page. The current implementation is causing an issue in the p-calendar tag within ngmodel, where date2[i] is being displayed based on the index i derived from p-datalist. I am retur ...

angular

Why does React / NextJS throw a "Cannot read properties of null" error?

In my NextJS application, I am using useState and useEffect to conditionally render a set of data tables: const [board,setBoard] = useState("AllTime"); const [AllTimeLeaderboardVisible, setAllTimeLeaderboardVisible] = useState(false); const [TrendingCreat ...

javascriptreactjstypescriptnext.js

Having trouble retrieving a dynamic name with Formcontrol error?

I keep encountering a typeError in this section of code <p *ngIf="formValue.controls['{{obj.name}}'].invalid, but when I manually enter it like this *ngIf="formValue.controls['uname'].invalid it works perfectly fine. What ...

javascriptangular

When attempting to access a URL directly, the Angular page not found feature fails to execute

Below is the defined route structure: const routes: Routes = [ { path: '', component: Layout, children: [ { path: 'home', component: HomeComponent}, { path: 'Product', component: ProductComponent ...

angular

Angular 10 - unable to bind 'formGroup' as it is not recognized as a valid property of 'form'

In my existing Angular application, I need to implement routing and a login page as the functionality expands. To integrate routing, I have included the following code: app.module.ts // Importing various modules @NgModule({ declarations: [ App ...

angularangular-reactive-forms

MSBUILD encounters numerous JQuery errors when compiling a web project with TypeScript

Currently, I am working on a .net core 3.1 (netcoreapp3.1) razor pages project that includes typescript files and a few javascript files. The project builds perfectly from Visual Studio 2019 (professional) as well as from the command line using MSBuild. H ...

typescriptmsbuild

Tips for modifying the UserRepresentation in keycloak REST API response

Whenever we send a GET request to the following URL: https://my-keycloak/admin/realms/test-realm/users We receive a comprehensive list of users who are associated with the test-realm. According to the Keycloak REST API documentation, this kind of respons ...

typescriptkeycloakkeycloak-rest-api

Configuring a server-side rendered Angular application on Plesk hosting platform

After successfully setting up server side rendering in my Angular app using nguniversal on my local machine, I am now facing the challenge of implementing this on a remote server with Plesk. In my local environment, I can serve the files by running: npm r ...

node.jsangularserver-side-renderingpleskangular-universal

Encountering an Error When Trying to Run Npm Install in React-Native

I encountered an issue while trying to perform an npm install on my project, so I deleted the node modules folder in order to reinstall it. However, even after running npm install in the appropriate directory, I continued to face numerous errors in my term ...

typescriptreact-nativenpm

Troubleshooting Problem with Angular Material 2's Mat-Paginator [Length] Bug

Utilizing the mat-paginator component for a table, I am facing an issue where I am unable to dynamically set the length of the paginator based on the total number of results retrieved from an API call. Despite trying various methods like setting it in the ...

angularangular-material

Incorrect object being returned from Angular 2 HTTP request

For my data fetching from the server, I am using @angular/http get method. Below is the code snippet: private _currentPT: any; public phongtroDetailChange = new Subject(); layPhongtro(id: number): Promise<any> { return new Promise((resolve, reject) ...

angularjsangularangular-promiseobservableangular-http

The header() function triggers automatic page redirection instead of waiting for the form to be submitted

When I created a form that automatically sends an email upon submission, my goal was to direct the user to a thank you page after the email is sent. In my search for a solution, I stumbled upon the header() function in php and attempted to use it with the ...

javascriptphpformsemail