Utilizing Angular 10, I have a formly-form with a select-field named session. This select field provides options from which to choose a dndSession. Each option holds key-value pairs within an object.
I want to add a button next to the select-field that triggers a modal-component called app-session-update-modal. My plan involves creating a custom field-wrapper, named session-edit-wrapper, and assigning it to the wrapper option of the session's FormlyFieldConfig. The goal is to link the currently selected dndSession object to the app-session-update-modal-component for editing. This is where I am encountering difficulties.
The challenge lies in accessing the value of a field within a wrapper (specifically the ng-container fieldComponent) to bind it to an attribute on my modal-component. Are there any events that I can leverage for this purpose? (I have attempted using ngModelChange without success as shown below)
To achieve the desired outcome, I understand that I need to connect the dndSession-objects as a Subject<dndSession> (from rxjs). However, establishing this connection has proven to be challenging.
Displayed below is the current HTML structure of my Wrapper, which admittedly contains errors. At this stage, I am merely speculating on what the correct Syntax should be. Ultimately, my objective is 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();
}
}