带有 formGroup 的角度材料日期范围选择器的自定义组件

Question

我正在尝试为 Angular 材质 daterangepicker 构建自定义组件。我遇到的问题是在 FormGroup 中使用了 daterangepicker，如下所示：

rangeControl: new FormGroup({
    fromControl: new FormControl('', Validators.required),
    toControl: new FormControl(new Date(), Validators.required)
})

在我目前的情况下，我想在以下嵌套的 FormGroup 中使用它，如下所示：

formGroup = new FormGroup({
    fooControl: new FormControl('', Validators.required),
    rangeControl: new FormGroup({
        fromControl: new FormControl('', Validators.required),
        toControl: new FormControl(new Date(), Validators.required)
    })
});

如何构建自定义组件，使上述表单组的模板如下所示：

<form [formGroup]="formGroup">
    <custom-reactive-foo formControlName="fooControl"></custom-reactive-foo>
    <custom-reactive-daterange formGroupName="rangeControl">
    </custom-reactive-daterange>
</form>

我尝试使用 here 中的 controlContainer 实现，但无济于事。 Angular 中的严格类型检查不断出现以下错误：

<块引用>

输入'AbstractControl | null' 不可分配给类型 'FormGroup'。 类型“null”不可分配给类型“FormGroup”。

所以基本上我的问题是：

如何以响应式形式实现我的自定义 daterangepicker 组件？