如何将 ng-select 包装在自定义表单控制器中？

Question

我尝试创建一个 stackblitz 来展示我正在谈论的内容，但我根本无法让它工作，所以我只能寻求帮助。我有 2 个组件：

组件 1 是一个自定义表单控制器，它包装了 ng-select 并针对后端添加了自定义搜索功能：

<div>
  <label>Custom Component</label>
  <ng-select
    [items]="items | async"
    .. Other properties
  ><ng-select>
  <span *ngIf="select.value < 3">Type 3 characters to search</span>
</div>

组件 2 是我想在其中使用客户控制器的表单：

<form formGroup="fg">
  <custom-controller
    formControllerName="custom-prop"
  >
  </custom-controller>
</form>

在我的自定义控制器中，我已经实现了 ControlValueAccessor，并且我能够手动从 ng-input 读取值并将其推送到表单。我正在努力解决的是相反的问题（即 formGroup 发生变化，我希望 ng-select 能够反映这一点）。我想出了几种方法，但它们看起来都非常复杂且不稳定。

有没有一种简单的方法可以将 formControllerName 传递给我的自定义控制器中的 ng-select 并使其按预期运行？

任何有关此工作的示例都将非常感激，因为我正在努力寻找任何东西。

Answer 1

我想你输错了“formControllerName”，应该是

formControlName

。

您创建的此类装饰器组件的想法是拥有类似“模型”属性的东西，您可以在

<ng-select [ngModel]="model" ...>

中使用。

在 ControlValueAccessor 中，您必须实现

writeValue

，这是一旦外部更改控件值就会触发的回调方法。 正在做

writeValue(val: ...): void {
  this.model = val;
  // might need cd.markForCheck() depending on your cd strategy
}

应该可以帮到你。

您可能面临的另一件事是，如果您的 BE 数据已分页，那么当您从外部使用 BE 响应第 2 页上的值填充控件时，但您最初加载第 1 页，那么将缺少与模型，因此需要对这种情况进行一些额外的处理。但这是您可能不需要的另一件事，因为我不知道您的详细信息