Angular 10 - Formly - Accessing a field's value in a custom formly-wrapper

Question

I am using Angular 10 and have a formly-form that includes a select-field called session. That select field allows me to choose one of several dndSession options. The value of each option is an object with a couple key-value pairs.

I'd like to be able to have next to my select-field a button that opens a modal-component app-session-update-modal. I planned to add it using a custom field-wrapper called session-edit-wrapper that I give to the wrapper option of session's FormlyFieldConfig. I want to bind the currently selected dndSession-object to my app-session-update-modal-component, so that I can edit it there. This is where I'm running into problems.

How do I access the value of a field in a wrapper (In the blow HTML that is the ng-container fieldComponent) to bind it to an attribute on my modal-component? Is there an event I can use? (I tried ngModelChange so far as below with no success)

I know I'll need to bind the dndSession-objects as a Subject<dndSession> (from rxjs), since I always want the button to lead to an edit of the currently selected dndSession. But how do I make that connection?

Below is the current HTML of my Wrapper, which I'm aware is pretty wrong, but I am only guessing currently what the correct Syntax would look like. The goal is, as stated, to bind a Subject<dndSession>-object to the session_subject attribute of my modal component:

//session-update-wrapper.html
<div class="d-flex">
    <div class="flex-1">
        <ng-container #fieldComponent (ngModelChange)="sessionPkSubject.next(#fieldComponent.value)"></ng-container>
    </div>
    <div class="ml-2">
        <app-session-update-modal [session_pk_subject]="sessionPkSubject"></app-session-update-modal>
    </div>
</div>

//session-update-wrapper.ts
... //Skipped over imports and the @Component decorator
export class SessionUpdateWrapperComponent extends FieldWrapper implements OnInit, OnDestroy{
  sessionPkSubject : Subject<number>;

  ngOnInit(): void{
    this.sessionPkSubject = new Subject();
  }

  ngOnDestroy(): void{
    this.sessionPkSubject.complete();
  }
}

Answer 1

Thanks to this reply from @a.aitboudad to an unrelated question and its comments below I managed to piece together, that you have access to various variables in a component wrapper, including formControl. I believe that is due to the class it inherits from. Either way, the variables you have access to can be seen on this github page.

With access to formControl of the select-field, we can grab its Observable formControl.valueChanges to get the selected Value over time with a subscription.

//session-update-wrapper.ts
export class SessionUpdateWrapperComponent extends FieldWrapper {}

//session-update-wrapper.html
<div class="d-flex">
    <div class="flex-1">
        <ng-container #fieldComponent></ng-container>
    </div>
    <div class="ml-2">
        <app-session-update-modal [session_pk_observable]="formControl.valueChanges"></app-session-update-modal>
    </div>
</div>