Mat-expansion-panel not listening to the model updates or the Form Control updates from a formly field

[aghosh-evertz]

I have thoroughly enjoyed using Formly. Thanks for the continuous support guys.
@aitboudad

Question

I have a formly form having multiple fields, out of which one is a which has multiple mat-autocomplete fields inside that. We can add (more fields through the add() method) and remove the added fields through remove(i) method from FieldArrayType class. This part is working fine.

Now, I want to add/delete items inside this mat-expansion panel based on some changes in the other field.
When the condition is satisfied, I am clearing the mat-expansion-panel field (formArray) form-control like below:

field 1 => which is getting changed
field 2 => this needs to be reset when field 1 is changed

field1: {
    expressions: {
      'props.change': (field: FormlyFieldConfig | undefined) => {
        let field2_form_control = field?.parent?.formControl?.get('<field_2_name>') as
          | FormArray
          | undefined;
        const field2_field_group = field?.parent?.fieldGroup?.find(
          item => item.key === '<field_2_name>',
        );
        if (
          field &&
          field.formControl &&
          field2_form_control &&
          field.parent?.model?.<field_2_name> &&
          field.formControl.value !== field2_field_group?.props?.maxItems
        ) {
          field2_form_control.clear();
          field2_form_control.setValue([]);
          field.parent.model.<field_2_name> = [];
        }
      },
    },
  },

When I update field 1, nothing is reflected in field 2. So basically if there are 3 items added previously, it stays like this. But when I try to add item after updating field 1, it suddenly shows only 1 item present, which is expected. I guess there is some trigger missing for the mat-expansion-panel field.

For reference. this is the field 2 template:

<mat-accordion #accordion multi>
  <mat-expansion-panel class="eio-form-array-section"
                       [disabled]="!field?.fieldGroup?.length"
                       [expanded]="!!field?.fieldGroup?.length"
                       [eioJsonFormFieldValidityProvider]="field">
    <mat-expansion-panel-header [ngClass]="[field?.fieldGroup?.length? 'eio-form-array-section-header' : 'eio-form-array-section-empty-header',
                                            invalidHighlightClass(field?.formControl?.invalid)]">
      <mat-panel-title eioHeaderType="h2"
                       [eioHeaderSection]="field"
                       class="eio-form-array-section-label">
        {{ props.label | eioTranslateFormly:'label':field: props.i18nInterpolationParams | ngrxPush }}
      </mat-panel-title>
      <mat-panel-description fxLayoutAlign="space-between center">
        <div>{{ props.description | eioTranslateFormly:'description':field: props.i18nInterpolationParams | ngrxPush }}</div>
        <button mat-raised-button
                type="button"
                class="eio-form-array-add-button"
                color="primary"
                [disabled]="form.disabled || (field.fieldGroup && props.maxItems && props.maxItems <= field.fieldGroup.length)"
                (click)="$event.stopPropagation(); add()"
                matTooltip="Add {{ props.label | eioTranslateFormly:'label':field: props.i18nInterpolationParams | ngrxPush}}">
          <span class="eio-truncate eio-form-array-btn-text">
            Add {{ props.label | eioTranslateFormly:'label':field: props.i18nInterpolationParams | ngrxPush }}
          </span>
        </button>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <span *ngIf="showError && formControl.errors"
          class="eio-form-array-item-error">
        <mat-error><formly-validation-message [field]="field"></formly-validation-message></mat-error>
      </span>
    <div class="eio-form-array-item-container">
      <ng-container *ngTemplateOutlet="items"></ng-container>
    </div>
  </mat-expansion-panel>
</mat-accordion>

<ng-template #items>
  <mat-card *ngFor="let field of field.fieldGroup; let i = index; trackBy: trackByFn"
            class="eio-form-array-item"
            fxLayout="column">
    <mat-card-content class="eio-form-array-item-content">
      <mat-accordion>
        <mat-expansion-panel [expanded]="true">
          <mat-expansion-panel-header class="eio-form-array-section-header">
            <div fxLayout="row"
                 fxLayoutAlign="space-between baseline"
                 fxFlex="100%">
              <div class="eio-form-array-item-label"
                   eioHeaderType="h3"
                   [eioHeaderSection]="field">
                {{ props.label | eioTranslateFormly:'label':field: props.i18nInterpolationParams | ngrxPush }}
                - {{ i + 1 }}
              </div>
              <div *ngIf="!form.disabled"
                   class="eio-form-array-item-remove-button">
                <button mat-icon-button
                        type="button"
                        matTooltip="Remove {{ props.label | eioTranslateFormly:'label':field: props.i18nInterpolationParams | ngrxPush}} - {{ i + 1 }}"
                        (click)="$event.stopPropagation(); remove(i)">
                  <mat-icon>delete_forever</mat-icon>
                </button>
              </div>
            </div>
          </mat-expansion-panel-header>
<! -- below is basically the field of FieldArrayType -->
          <eio-json-form-array-field-child [field]="field"></eio-json-form-array-field-child>
        </mat-expansion-panel>
      </mat-accordion>
    </mat-card-content>
  </mat-card>
</ng-template>