Tips for accessing the FormControlName of the field that has been modified in Angular reactive forms

Question

Tips for accessing the FormControlName of the field that has been modified in Angular reactive forms

My reactive form consists of more than 10 form controls and I currently have a subscription set up on the valueChanges observable to detect any changes. While this solution works well, the output always includes the entire form value object, which includes all form controls along with their values. Is there a way to specifically identify the name of the form control that was changed?

this.form = this.fb.group({
    field1: ['', Validators.required],
    field2: ['', Validators.required],
    field3: ['', Validators.required],
    field4: ['', Validators.required],
    field5: ['', Validators.required],
    field6: ['', Validators.required],
    field7: ['', Validators.required],
    field8: ['', Validators.required],
    field9: ['', Validators.required],
    field10: ['', Validators.required],
    field11: ['', Validators.required],
    field12: ['', Validators.required],
    field13: [{ value: '', disabled: true }, Validators.required]
});

this.form.valueChanges.subscribe(
    result => this.calculateParams(result)
);

calculateParams(result) {
    console.log(result); // giving the entire form.value object
}

javascript angular typescript rxjs

Answer 1

Answer №1

Eliseo's solution using rxjs here

this.form.valueChanges.pipe(
    startWith(this.form.value),
    pairwise(),
    map(([previousValues, currentValues]) => {
        return Object.keys(currentValues).find(key => currentValues[key] != previousValues[key]);
    }),
).subscribe(updatedKey => {
    console.log(updatedKey)
});

Answer 2

Eliseo's solution using rxjs here

this.form.valueChanges.pipe(
    startWith(this.form.value),
    pairwise(),
    map(([previousValues, currentValues]) => {
        return Object.keys(currentValues).find(key => currentValues[key] != previousValues[key]);
    }),
).subscribe(updatedKey => {
    console.log(updatedKey)
});

Answer 3

Answer №2

One method to consider is storing the previous values and implementing a solution similar to this:

this.previousValues={...this.formData.value}
this.formData.valueChanges.subscribe(response=>{
  const key=Object.keys(response).find(property=>response[property]!=this.previousValues[property])
  this.previousValues={...this.formData.value}
})

Answer 4

One method to consider is storing the previous values and implementing a solution similar to this:

this.previousValues={...this.formData.value}
this.formData.valueChanges.subscribe(response=>{
  const key=Object.keys(response).find(property=>response[property]!=this.previousValues[property])
  this.previousValues={...this.formData.value}
})

Answer 5

Answer №3

To separate the form control from the form group, simply utilize the get function and then access the valueChanges method.

this.form.get('formControlName').valueChanges()

.

Please keep in mind that form.get will give you the AbstractControl, which also includes the valueChanges method.

Answer 6

To separate the form control from the form group, simply utilize the get function and then access the valueChanges method.

this.form.get('formControlName').valueChanges()

.

Please keep in mind that form.get will give you the AbstractControl, which also includes the valueChanges method.

Answer 7

Answer №4

Although not thoroughly tested, the concept involves matching controls with their respective keys and listening to valueChanges on each control simultaneously. Instead of returning the value, the object key is returned (and both the value and key can be mapped to the output).

const inputFields = {
    fieldA: ['', Validators.required],
    fieldB: ['', Validators.required],
    fieldC: ['', Validators.required],
    fieldD: ['', Validators.required],
    fieldE: ['', Validators.required],
    fieldF: ['', Validators.required]
}

zip(
    from(Object.values(fb.group(inputFields).controls)),
    from(Object.keys(inputFields))
).pipe(mergeMap([control, key]) => control.valueChanges.pipe(mapTo(key)))

Answer 8

Although not thoroughly tested, the concept involves matching controls with their respective keys and listening to valueChanges on each control simultaneously. Instead of returning the value, the object key is returned (and both the value and key can be mapped to the output).

const inputFields = {
    fieldA: ['', Validators.required],
    fieldB: ['', Validators.required],
    fieldC: ['', Validators.required],
    fieldD: ['', Validators.required],
    fieldE: ['', Validators.required],
    fieldF: ['', Validators.required]
}

zip(
    from(Object.values(fb.group(inputFields).controls)),
    from(Object.keys(inputFields))
).pipe(mergeMap([control, key]) => control.valueChanges.pipe(mapTo(key)))

Answer 9

Answer №5

If you want to monitor each change individually, you can subscribe to them separately.

for (const ctrlProp in this.myForm.controls) {
    if (this.myForm.controls.hasOwnProperty(ctrlProp)) {
      this.myForm.controls[ctrlProp].valueChanges.pipe(untilDestroyed(this)).subscribe(res => {
        console.log(ctrlProp + " has been updated to ", res);
      });
    }
}

This approach gives it more of an Angular feel.

Answer 10

If you want to monitor each change individually, you can subscribe to them separately.

for (const ctrlProp in this.myForm.controls) {
    if (this.myForm.controls.hasOwnProperty(ctrlProp)) {
      this.myForm.controls[ctrlProp].valueChanges.pipe(untilDestroyed(this)).subscribe(res => {
        console.log(ctrlProp + " has been updated to ", res);
      });
    }
}

This approach gives it more of an Angular feel.

Answer 11

Answer №6

To ensure proper functionality, employ the valueChanges method for each control after dynamically adding a new control to the FormGroup.

const newControl = {key: 'myNewControl'};    
this.myForm.addControl(newControl.key, new FormControl('', Validators.required))
this.myForm.controls[newControl.key].valueChanges
.subscribe(data => {
    // the newControl object will remain accessible as a closure within this context, allowing us to manipulate each form control accordingly
    console.log(data, newControl.key);
})

The newControl object can be accessed within the subscribe function as a closure.

Answer 12

To ensure proper functionality, employ the valueChanges method for each control after dynamically adding a new control to the FormGroup.

const newControl = {key: 'myNewControl'};    
this.myForm.addControl(newControl.key, new FormControl('', Validators.required))
this.myForm.controls[newControl.key].valueChanges
.subscribe(data => {
    // the newControl object will remain accessible as a closure within this context, allowing us to manipulate each form control accordingly
    console.log(data, newControl.key);
})

The newControl object can be accessed within the subscribe function as a closure.

Answer 13

Answer №7

Utilizing the approach by @alex-walker () appears to be advantageous, however, it is most effective on flat forms containing simple key-value pairs. In scenarios where there are nested forms with FormArrays of FormGroups, the key property in that technique will solely return the top-level key of the form, which may not be very practical if you wish to specify to the user the specific input field that triggered the event.

To address this limitation, I merged this method with a deep object difference function explained here:

This hybrid solution yields:

this.form.valueChanges
    .pipe(
        startWith(this.form.value),
        pairwise(),
        map(([oldValues, newValues]) => {
            return bdiff(oldValues, newValues);
        })
    )
    .subscribe(keys => {
        console.log(keys);
    });

bdiff(a: Record<string, any>, b: Record<string, any>): string[] {
    return _reduce(
        a,
        (res, val, key) =>
            res.concat(
                (_isPlainObject(val) || Array.isArray(val)) && b
                    ? this.bdiff(val, b[key]).map(x => key + (key.trim ? '' : ']') + (x.search(/^\d/) ? '.' : '[') + x)
                    : !b || val !== b[key]
                    ? [key + (key.trim ? '' : ']')]
                    : []
            ),
        []
    );
}

This will produce an array of nested keys like

keys = ['fieldgroup2.fieldArray[3].myNestedField']

which can be easily accessed and marked as invalid using form.get(keys[0]).valid.

Answer 14

Utilizing the approach by @alex-walker () appears to be advantageous, however, it is most effective on flat forms containing simple key-value pairs. In scenarios where there are nested forms with FormArrays of FormGroups, the key property in that technique will solely return the top-level key of the form, which may not be very practical if you wish to specify to the user the specific input field that triggered the event.

To address this limitation, I merged this method with a deep object difference function explained here:

This hybrid solution yields:

this.form.valueChanges
    .pipe(
        startWith(this.form.value),
        pairwise(),
        map(([oldValues, newValues]) => {
            return bdiff(oldValues, newValues);
        })
    )
    .subscribe(keys => {
        console.log(keys);
    });

bdiff(a: Record<string, any>, b: Record<string, any>): string[] {
    return _reduce(
        a,
        (res, val, key) =>
            res.concat(
                (_isPlainObject(val) || Array.isArray(val)) && b
                    ? this.bdiff(val, b[key]).map(x => key + (key.trim ? '' : ']') + (x.search(/^\d/) ? '.' : '[') + x)
                    : !b || val !== b[key]
                    ? [key + (key.trim ? '' : ']')]
                    : []
            ),
        []
    );
}

This will produce an array of nested keys like

keys = ['fieldgroup2.fieldArray[3].myNestedField']

which can be easily accessed and marked as invalid using form.get(keys[0]).valid.

Tips for accessing the FormControlName of the field that has been modified in Angular reactive forms

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

A circular reference occurs when a base class creates a new instance of a child class within its own definition

Navigating through different components in Angular without using templates

You have encountered an error: [ERR_HTTP_HEADERS_SENT]. This means that you cannot set headers after they have already been sent to the client, even if a return

Using Typescript to inherit from several classes with constructors

Create a consistent number based on quantity

I'm only appending the final element to the JavaScript array

After the click event, the variable in the Angular .ts file does not get refreshed

Step-by-step guide to utilizing instance functions in AngularJS

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

What is the solution for breaking a querySnapshot in Firestore?

Encountered an error during npm installation: Fetch Package Metadata error occurred while attempting to request from http://registry.npmjs.org/concurrently, the cause being a socket hangup

Is it possible to implement a customized pathway for the functions within an Azure function app?

When a page first loads in Next.js with Firebase, the useEffect hook may return an undefined value

The parent element of a 3D div is causing issues with hovering and clicking on the child elements

Why use getElementById(id) to obtain an element in JavaScript when it already exists in the JS?

The debounced function in a React component not triggering as expected

Passing data back from an asynchronous function to its parent function in Node.js

react componentdidupdate triggers never-ending iteration

Angular 14 is throwing an error due to an indent issue - the expected indentation is 2 spaces but 4 spaces were found