dirty-check-forms icon indicating copy to clipboard operation
dirty-check-forms copied to clipboard

Form is marked dirty when dropdown is pre-populated

Open adulfan opened this issue 1 year ago • 6 comments

I have a dropdown that get's pre-populated with default first value from the options, when the form is created it's empty all values are null but then inputs$ that I am using from ngx-sub-form on subscribe are populated with the dropdown values so the form becomes pristine:false and the form is marked as dirty, I am not clear how to fix it. Thank you


initControlWithOptions() {
    if (this.autoDisplayFirst && this.options && this.options.length > 0 && this.control) {
      const firstOptionValue = this.optionValue ? this.options[0][this.optionValue] : this.options[0];
      this.control.patchValue(firstOptionValue, { emitEvent: true });
    }
  }

Angular version: 17
 
For Tooling issues:
- Node version: v18.17.0  
- Platform:  Mac 

adulfan avatar Feb 28 '24 13:02 adulfan

Both the form and the source should be the same value, so you probably should update also the source value.

NetanelBasal avatar Feb 28 '24 13:02 NetanelBasal

I am not clear where? I an checking onInit this.sub = dirtyCheck(this.form.formGroup, this.input$, { debounce: 100, withDisabled: true, useBeforeunloadEvent: false }) .pipe(takeUntil(this.onDestroy$)) .subscribe(isDirty => { this.formStateService.updateDirtyFlag(isDirty); console.log('from the root form', isDirty); }); and isDirty is true because values in this.input$ different then this.form.formGroup, that's what i can'e figure out where to test the values?

adulfan avatar Feb 28 '24 13:02 adulfan

Can you create a simple reproduction on stackblitz?

NetanelBasal avatar Feb 28 '24 13:02 NetanelBasal

I have never tried it, but basically if the form has some initial values that were passed into dropdowns the inputs$ are updated with the values and the formGroup is not, so I am not clear at what point to check for dirty, I also installed and downloaded the git but it's broken.

adulfan avatar Feb 28 '24 14:02 adulfan

https://angular-6-template-1rcxch.stackblitz.io see this please when I print out formValues and Inuts form {"firstName":"","lastName":"","draftQuality":"NY","address":{"street":"","city":"","state":"","zipCode":""},"emails":[{"email":""}]} input$ {"firstName":"","lastName":"","draftQuality":"","address":{"street":"","city":"","state":"","zipCode":""},"emails":[{"email":""}]} inputs are not updated with initial values.

adulfan avatar Feb 28 '24 14:02 adulfan

Hello, where you able to see the code?

adulfan avatar Feb 29 '24 15:02 adulfan