Verify whether the value of the Reactive form has been modified from its initial state

Question

Verify whether the value of the Reactive form has been modified from its initial state

I am currently dealing with a reactive form that has 3 controls, and I need to detect any changes made to the form. I have implemented a method for detecting value changes in the form and subscribed to it. However, I am facing an issue where the event is being emitted every time any of the control values are changed.

In a scenario where a user adds a value to any of these 3 controls and attempts to leave the page, I want to display a modal indicating that there are unsaved changes in the form.

How can I verify whether the emitted value on form change is different from its initial value?

public createGroupForm: FormGroup;

ngOnInit() {
  this.createGroupForm = this._formBuilder.group({
      groupName: new FormControl("", [Validators.required]),
      groupPrivacy: new FormControl(null, [Validators.required]),
      groupTagline: new FormControl('')
  });

  this.onCreateGroupFormValueChange();
}


onCreateGroupFormValueChange(){
    this.createGroupForm.valueChanges.subscribe(value => {
      console.log(value);
      //emitting every time if any control value is changed
    });
}

angular typescript

Answer 1

Answer №1

It is important to verify the form values every time a subscription is emitted in order to compare them with the initial values. The hasChange property can be utilized whenever necessary.

public groupForm: FormGroup;
hasChange: boolean = false;

ngOnInit() {
  this.groupForm = this._formBuilder.group({
      groupName: new FormControl("", [Validators.required]),
      groupPrivacy: new FormControl(null, [Validators.required]),
      groupTagline: new FormControl('')
  });

  this.onFormValueChange();
}


onFormValueChange(){
    const initialValue = this.groupForm.value
    this.groupForm.valueChanges.subscribe(value => {
      this.hasChange = Object.keys(initialValue).some(key => this.form.value[key] != 
                        initialValue[key])
    });
}

Answer 2

It is important to verify the form values every time a subscription is emitted in order to compare them with the initial values. The hasChange property can be utilized whenever necessary.

public groupForm: FormGroup;
hasChange: boolean = false;

ngOnInit() {
  this.groupForm = this._formBuilder.group({
      groupName: new FormControl("", [Validators.required]),
      groupPrivacy: new FormControl(null, [Validators.required]),
      groupTagline: new FormControl('')
  });

  this.onFormValueChange();
}


onFormValueChange(){
    const initialValue = this.groupForm.value
    this.groupForm.valueChanges.subscribe(value => {
      this.hasChange = Object.keys(initialValue).some(key => this.form.value[key] != 
                        initialValue[key])
    });
}

Answer 3

Answer №2

You don't have to sign up, simply view it whenever the user is about to leave:

class UserDataComponent implements OnInit {
  userDetailsForm!: FormGroup;
  initialValues!: User;

  ngOnInit() {
    this.userDetailsForm = this.formBuilder.group({
      firstName: ['', [Validators.required]],
      lastName: ['', [Validators.required]],
      // More fields can be added here
    });
    this.initialValues = this.userDetailsForm.value;
  }

  formIsModified(): boolean {
    return Object.entries(this.initialValues).some(
      ([field, value]) => value !== this.userDetailsForm.value[field]
    );
  }

  leavingPage() {
    if (this.formIsModified()) {
      // Show confirmation modal
    } else {
      // Proceed with user redirection
    };
  }
}

Answer 4

You don't have to sign up, simply view it whenever the user is about to leave:

class UserDataComponent implements OnInit {
  userDetailsForm!: FormGroup;
  initialValues!: User;

  ngOnInit() {
    this.userDetailsForm = this.formBuilder.group({
      firstName: ['', [Validators.required]],
      lastName: ['', [Validators.required]],
      // More fields can be added here
    });
    this.initialValues = this.userDetailsForm.value;
  }

  formIsModified(): boolean {
    return Object.entries(this.initialValues).some(
      ([field, value]) => value !== this.userDetailsForm.value[field]
    );
  }

  leavingPage() {
    if (this.formIsModified()) {
      // Show confirmation modal
    } else {
      // Proceed with user redirection
    };
  }
}

Answer 5

Answer №3

It is recommended to utilize the ngOnDestroy lifecycle hook method. Within this method, you can compare the current value with the initial value of a form and trigger the opening of a modal if there is a difference.

@Component({ selector: 'my-cmp', template: `...` })
class MyComponent implements OnDestroy {
    public createGroupForm: FormGroup;
    public initialValues;

    ngOnInit() {
        this.createGroupForm = this._formBuilder.group({
            groupName: new FormControl("", [Validators.required]),
            groupPrivacy: new FormControl(null, [Validators.required]),
            groupTagline: new FormControl('')
        });
        this.initialValues = this.createGroupForm.value;
    }
    ngOnDestroy() {
        if (this.initalValues != this.createGroupForm.value) {
            //open modal
        }
    }
}

Answer 6

It is recommended to utilize the ngOnDestroy lifecycle hook method. Within this method, you can compare the current value with the initial value of a form and trigger the opening of a modal if there is a difference.

@Component({ selector: 'my-cmp', template: `...` })
class MyComponent implements OnDestroy {
    public createGroupForm: FormGroup;
    public initialValues;

    ngOnInit() {
        this.createGroupForm = this._formBuilder.group({
            groupName: new FormControl("", [Validators.required]),
            groupPrivacy: new FormControl(null, [Validators.required]),
            groupTagline: new FormControl('')
        });
        this.initialValues = this.createGroupForm.value;
    }
    ngOnDestroy() {
        if (this.initalValues != this.createGroupForm.value) {
            //open modal
        }
    }
}

Answer 7

Answer №4

Utilize rxjs operators for value validation.

 import { FormGroup, FormBuilder, Validators, FormControl, FormArray, NgForm } from '@angular/forms';  
import { pairwise, startWith } from 'rxjs/operators';

this.createGroupForm.valueChanges
      .pipe(startWith(''), pairwise())
      .subscribe(([previousValue, currentValue]) => {
        console.log('Previous value:', previousValue);
        console.log('Current value:', currentValue);
        console.log('---');

        if (confirm('Confirm value change')) {
          console.log('Value changed');
        } else {
          console.log('Value not changed');
        }

Answer 8

Utilize rxjs operators for value validation.

 import { FormGroup, FormBuilder, Validators, FormControl, FormArray, NgForm } from '@angular/forms';  
import { pairwise, startWith } from 'rxjs/operators';

this.createGroupForm.valueChanges
      .pipe(startWith(''), pairwise())
      .subscribe(([previousValue, currentValue]) => {
        console.log('Previous value:', previousValue);
        console.log('Current value:', currentValue);
        console.log('---');

        if (confirm('Confirm value change')) {
          console.log('Value changed');
        } else {
          console.log('Value not changed');
        }

Answer 9

Answer №5

One alternative approach involves subscribing to form.valueChanges :

import { isEqual } from 'lodash';

public groupForm : FormGroup;
hasModified: boolean = false;

private readonly destroyRef = inject(DestroyRef);

ngOnInit() {
  this.groupForm = this._formBuilder.group({
      name: new FormControl("", [Validators.required]),
      privacyStatus: new FormControl(null, [Validators.required]),
      tagline: new FormControl('')
  });

  this.onGroupFormValueChange();
}


onGroupFormValueChange(){
    const initialData = this.groupForm.value
    this.groupForm.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(
        formData => this.hasModified = !isEqual(initialData , formData))
      )
}

Answer 10

One alternative approach involves subscribing to form.valueChanges :

import { isEqual } from 'lodash';

public groupForm : FormGroup;
hasModified: boolean = false;

private readonly destroyRef = inject(DestroyRef);

ngOnInit() {
  this.groupForm = this._formBuilder.group({
      name: new FormControl("", [Validators.required]),
      privacyStatus: new FormControl(null, [Validators.required]),
      tagline: new FormControl('')
  });

  this.onGroupFormValueChange();
}


onGroupFormValueChange(){
    const initialData = this.groupForm.value
    this.groupForm.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(
        formData => this.hasModified = !isEqual(initialData , formData))
      )
}

Answer 11

Answer №6

To implement a check for unsaved changes when leaving the page, you can utilize the dirty method in the following way:

if(this.createGroupForm.get('groupName').dirty || 
 this.createGroupForm.get('groupPrivacy').dirty || 
 this.createGroupForm.get('groupTagline').dirty) {
   // display alert for any unsaved modifications
}

Answer 12

To implement a check for unsaved changes when leaving the page, you can utilize the dirty method in the following way:

if(this.createGroupForm.get('groupName').dirty || 
 this.createGroupForm.get('groupPrivacy').dirty || 
 this.createGroupForm.get('groupTagline').dirty) {
   // display alert for any unsaved modifications
}

Verify whether the value of the Reactive form has been modified from its initial state

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Determine if the current page is the root page in Ionic 2 - here's how!

Is there a more efficient method for crafting this Angular Testing code?

What is the process for triggering property decorators during runtime?

Received Angular Error: Attempting to differentiate '[object Object]'. Permissible are only arrays and iterables

An ERROR occurred indicating that the Object(...) is not functioning properly when utilizing the UniqueDeviceID

I'm looking to receive the specific data types for express request arguments. How can I

Export interface for material-ui wrapper to cast any type in TypeScript (React)

Creating a nested/child route structure within the Angular 2 router

Tips for troubleshooting Bootstrap Dropdown in a vertical navigation bar

Achieving vertical alignment of placeholder in mat-select-field within Angular

Get the latest version of Node Stream using Angular 2

Angular CLI produced the Git command

Error Encountered When Trying to Import BrowserAnimationsModule in Angular 5: Unexpected Token "<"

Can you explain the distinction between implementing tab content styles?

Is it a common issue that sound.stop() doesn't seem to function properly, while sound.play() operates successfully within Howler

What is the best way to update the current route in Angular 2 programmatically?

Issues with sending emails through Nodemailer in a Next.js project using Typescript

What is the procedure for cancelling a file upload in the FileUpload component of PrimeNG?

Troubleshooting Angular's efficiency problems when dealing with extensive datasets and prime NG datagrids

Struggling to determine the type of constant after a specific type check? (TS2349: Unable to call a function on a type that does not have a call signature