What is the correct way to add a custom component to a reactive form's FormGroup?

Question

I am having a lot of problems using formControlName on a custom component wrapping an mat-select.

Now it appears that my custom control cannot find the form group? Even though the custom element is nested under the formGroup.

I have a StackBlitz

But the problem comes in when I nest my custom component under the formGroup, all of the other controls can find the formGroup but my custom component doesn't seem to be able to.

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

In this example the Id field would work properly, but the Culture field complains about not being nested in a FormGroup?

Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

How should a custom component work with reactive forms and form group?

My original problem was not remembering to import the ReactiveFormsModule.. Maybe I'm forgetting to import something again?

Is this answer the designed way to accomplish this? Or am I missing a simplier solution??

Do I need to implement a control value accessor?? As explained here

just confused on the designed way to do this.

my component wraps angular material's mat-select, and I guess I'm also confused if I need to put attributes on the mat-select or have my component implement the control value accessor? nothing seems to be working.

Answer 1

I did some research and got it working with the control value accessor:

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