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.

What are you trying to accomplish with the binding of formControlName? Your stackblitz looks to be working with reactive forms. — p4r1
– p4r1, Commented Oct 17, 2018 at 20:14
Well your code works perfectly fine with formControlName="{{name}}" and name variable 'animationType'. I saw no error while editing — Suryan
– Suryan, Commented Oct 17, 2018 at 20:15

Moisés Palma Isern · Accepted Answer · 2020-07-30 08:55:28Z

4

I solved that problem using the parameter 'formControl' instead of 'formControlName' like this: input-date.compoenent.html

<p-calendar [formControl]="control"></p-calendar>

parent.component.html

<input-date [control]="formGroup.controls.date"></input-date>

Where control is an input of input-date.component:

@Input() control: FormControl;

answered Jul 30, 2020 at 8:55

Moisés Palma Isern

515 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JBoothUA · Accepted Answer · 2018-10-29 20:04:10Z

1

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

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

edited Oct 29, 2018 at 20:04

answered Oct 17, 2018 at 20:28

JBoothUA

3,1976 gold badges23 silver badges48 bronze badges

1 Comment

mmonteirocl Over a year ago

He told you that he is trying to use a wrapper of the normal input. So this solution actually does not fix the issue he mentions. The solution below though, actually fixes the issue

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related