Custom component for angular material daterangepicker with formGroup

Question

I'm trying to build a custom component for the Angular material daterangepicker. The problem i am stuck with is that a daterangepicker is used in a FormGroup like so:

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

In my current situation i want to use it in the following nested FormGroup like so:

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

How can i build a custom component so that the template for the above form group looks like this:

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

I tried using the controlContainer implementation as seen here but to no avail. Strict type checking in Angular keeps giving my the following error:

Type 'AbstractControl | null' is not assignable to type 'FormGroup'. Type 'null' is not assignable to type 'FormGroup'.

So essentially my question is:

How can I implement my custom daterangepicker component in a reactive forms?

Custom component for angular material daterangepicker with formGroup

0 Answers0