form:

 parentForm: FormGroup = this.formBuilder.group({
    childrenForms: this.formBuilder.array([
      this.formBuilder.group({
        selectionTypes: this.formBuilder.control<string[]>(
          [],
          [Validators.required, nonEmptyArrayValidator()],
        ),
      }),
    ]),
  });

template:

      <div [formGroup]="rootForm">
      @let selectionForm = childForm.get('selectionTypes');
      <mat-form-field appearance="outline" floatLabel="always">
        <mat-label>Type</mat-label>
        <input matInput [matMenuTriggerFor]="menu" placeholder="Select type" yPosition="below"
           formControlName="selectionTypes" [value]="selectionForm?.value | getDisplayLabel : assemblyList" readonly>

          <p>display: {{ selectionForm?.value | getDisplayLabel : labelMap }}</p>
      </mat-form-field>
      </div>

NOTE: reduced the template code to only the affected form field. Ignore the missing template code

In my form I have a mat-menu where the user can multi-select checkboxes. I've created a custom pipe that converts the selected ids and creates a user friendly label for each selection to display in my input.

When selecting, everything works and the custom labels is displayed: ex "Lolipop, chocolate... +1"

This form is part of a material stepper where each step initializes a specific component. The issue I have is when the I navigate back to this component and it initializes the component with existing form data but doesn't display the custom label from the pipe. Instead it displays the raw value (selected ids).

I've verified that the pipe is invoked but the form control overrides my custom pipe string so I'm left with a label: "option1,option2,option3".

I've tried patching the value in each selectionTypes control in AfterViewInit to try to trigger a change detection, similar to when the user is first filling out the form but it still displays the raw values. Also tried a manual cd trigger using ChangeDetectorRef, doesn't work.