FieldArrayType this.remove(index) without triggering form to be dirty

[johnRambo2k14]

Question

Hi,

I have a scenario where I want to remove a form/field from my fieldArray, but i don't want this to be triggered as dirty as I perform my operations in piece-meal, meaning i don't have an overall "save" button to reset my form to pristine, once i press the delete button it will call an async request as well as calling this.remove(index);

I'm curious is there a way to call this.remove(index) without causing my form to be dirty?

use case:
I have an unsaved warning message when a user triggers the form to be dirty when navigating away, however i don't want this to be displayed when deleting a form/field.

[aitboudad]

adding an extra option that allows skipping markAsDirty call would be the solution.
For now, you may use the following workaround:

@Component({
  selector: 'formly-repeat-section',
  template: `
    ...
    <button type="button"
      (click)="remove(i, { markAsDirsty: false })">
      Remove
    </button>
  `,
})
export class RepeatTypeComponent extends FieldArrayType {
  ...

  remove(i: number, { markAsDirsty } = { markAsDirsty: true }) {
    const isDirty = this.formControl.dirty;

    super.remove(i);
    if (!isDirty && markAsDirsty === false) {
      this.formControl.markAsPristine();
    }
  }
}

[aitboudad]

This issue has been fixed and released as part of v5.6.0 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!