将自定义组件添加到响应式表单的 FormGroup 的正确方法是什么？

Question

我在包装 mat-select 的自定义组件上使用 formControlName 时遇到很多问题。

现在看来我的自定义控件找不到表单组？即使自定义元素嵌套在 formGroup 下。

我有一个StackBlitz

但是当我将自定义组件嵌套在 formGroup 下时，问题就出现了，所有其他控件都可以找到 formGroup 但我的自定义组件似乎无法找到。

<form novalidate [formGroup]="tenantForm">
    <label for="Id">Id</label>: <input class="form-control" formControlName="id" id="Id" name="Id" />
    <custom-component-with-mat-select formControlName="culture" id="Culture" name="Culture"></custom-component-with-mat-select>
</form>

在这个例子中，Id 字段可以正常工作，但是 Culture 字段抱怨没有嵌套在 FormGroup 中？

错误：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将其传递给现有的 FormGroup 实例（您可以在类中创建一个）。

自定义组件应该如何与响应式表单和表单组一起使用？

我最初的问题是不记得导入 ReactiveFormsModule .. 也许我忘记再次导入某些东西？

这个答案是实现这一目标的设计方法吗？或者我错过了一个更简单的解决方案？

我需要实现一个控制值访问器吗？？正如这里所解释的

只是对设计的方式感到困惑。

我的组件包装了 angular material 的 mat-select，如果我需要在 mat-select 上放置属性或让我的组件实现控制值访问器，我想我也很困惑？似乎没有任何效果。

Answer 1

我做了一些研究并让它与控制值访问器一起使用：

https://stackblitz.com/edit/mat-select-with-controlvalueaccessor