Angular 10 - Formly - 在自定义 formly-wrapper 中访问字段的值

Question

我正在使用 Angular 10 并且有一个 formly-form，其中包含一个名为 session 的 select 字段。 select 字段允许我从几个 dndSession 选项中选择一个。每个选项的值都是一个具有一对键值对的对象。

我希望能够在我的 select 字段旁边有一个打开模态组件 app-session-update-modal 的按钮。我计划使用一个名为 session-edit-wrapper 的 custom field-wrapper 添加它，我将其赋予 session 的 FormlyFieldConfig 的 wrapper 选项。我想将当前 selected dndSession-object 绑定到我的 app-session-update-modal-component，这样我就可以在那里编辑它。这就是我运行遇到问题的地方。

如何访问包装器中字段的值（在 blow HTML 中，即 ng-container fieldComponent）以将其绑定到我的模态组件上的属性？有我可以使用的活动吗？（到目前为止，我尝试了 ngModelChange 但没有成功）

我知道我需要将 dndSession 对象绑定为 Subject<dndSession> (from rxjs)，因为我总是希望该按钮导致对当前 selected dndSession。但是我该如何建立这种联系呢？

下面是我的包装器的当前 HTML，我知道这是非常错误的，但我目前只是在猜测正确的语法应该是什么样子。如前所述，目标是将 Subject<dndSession> 对象绑定到我的模态组件的 session_subject 属性：

//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

感谢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。

通过访问 select 字段的 formControl，我们可以获取其 Observable formControl.valueChanges 以通过订阅随时间获取 selected 值。

//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>

Angular 10 - Formly - 在自定义 formly-wrapper 中访问字段的值

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

typescript

angular-formly

angular

ngx-formly