title: Angular 10 - Formly - Accessing a field's value in a custom formly-wrapper
body: <p>I am using Angular 10 and have a <a href="https://formly.dev" rel="nofollow noreferrer">formly-form</a> that includes a select-field called <code>session</code>. That select field allows me to choose one of several <code>dndSession</code> options. The value of each option is an object with a couple key-value pairs.</p>
  <p>I'd like to be able to have next to my select-field a button that opens a modal-component <code>app-session-update-modal</code>. I planned to add it using a <a href="https://formly.dev/guide/custom-formly-wrapper" rel="nofollow noreferrer">custom field-wrapper</a> called <code>session-edit-wrapper</code> that I give to the <code>wrapper</code> option of <code>session</code>'s <code>FormlyFieldConfig</code>. I want to bind the currently selected <code>dndSession</code>-object to my <code>app-session-update-modal</code>-component, so that I can edit it there. This is where I'm running into problems.</p>
  <p>How do I access the value of a field in a wrapper (In the blow HTML that is the ng-container <code>fieldComponent</code>) 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)</p>
  <p>I know I'll need to bind the <code>dndSession</code>-objects as a <a href="https://rxjs.dev/guide/subject" rel="nofollow noreferrer"><code>Subject&lt;dndSession&gt;</code> (from rxjs)</a>, since I always want the button to lead to an edit of the currently selected <code>dndSession</code>. But how do I make that connection?</p>
  <p>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 <code>Subject&lt;dndSession&gt;</code>-object to the <code>session_subject</code> attribute of my modal component:</p>
  <pre><code>//session-update-wrapper.html
  &lt;div class=&quot;d-flex&quot;&gt;
      &lt;div class=&quot;flex-1&quot;&gt;
          &lt;ng-container #fieldComponent (ngModelChange)=&quot;sessionPkSubject.next(#fieldComponent.value)&quot;&gt;&lt;/ng-container&gt;
      &lt;/div&gt;
      &lt;div class=&quot;ml-2&quot;&gt;
          &lt;app-session-update-modal [session_pk_subject]=&quot;sessionPkSubject&quot;&gt;&lt;/app-session-update-modal&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>//session-update-wrapper.ts
  ... //Skipped over imports and the @Component decorator
  export class SessionUpdateWrapperComponent extends FieldWrapper implements OnInit, OnDestroy{
    sessionPkSubject : Subject&lt;number&gt;;
  
    ngOnInit(): void{
      this.sessionPkSubject = new Subject();
    }
  
    ngOnDestroy(): void{
      this.sessionPkSubject.complete();
    }
  }
  
  </code></pre>