Angular 10 - Formly - 在自定义形式包装器中访问字段的值答案

【问题标题】：Angular 10 - Formly - Accessing a field's value in a custom formly-wrapperAngular 10 - Formly - 在自定义形式包装器中访问字段的值
【发布时间】：2020-12-06 23:33:48
【问题描述】：

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

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

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

我知道我需要将dndSession-objects 绑定为Subject<dndSession> (from rxjs)，因为我总是希望该按钮可以编辑当前选定的dndSession。但是我该如何建立这种联系呢？

下面是我的 Wrapper 的当前 HTML，我知道这是非常错误的，但我目前只是猜测正确的语法是什么样的。如前所述，目标是将Subject<dndSession>-object 绑定到我的模态组件的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();
  }
}

【问题讨论】：

标签： angular typescript angular-formly ngx-formly

【解决方案1】：

感谢@a.aitboudad 中的this reply 到一个不相关的问题及其下面的cmets，我设法拼凑起来，您可以访问组件包装器中的各种变量，包括formControl。我相信这是由于它继承的类。无论哪种方式，您可以访问的变量都可以看到on this github page。

通过访问选择字段的formControl，我们可以通过订阅获取其可观察的formControl.valueChanges，从而随着时间的推移获取选定的值。

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

【讨论】：