Using formGroupName and passing it to a separate component?

Question

I have the following template:

<mat-form-field class="dense no-bottom" appearance="fill" style="min-width: 8em; flex: 1;"><mat-label>{{ label | translate}}</mat-label><mat-select formControlName="year" ><mat-option [value]="null">{{"PMHX.DONT_KNOW" | translate}}</mat-option><mat-option *ngFor="let year of yearOptions" [value]="year">{{ year }}</mat-option></mat-select></mat-form-field>'''

And the following .ts file

export class YearSelectorComponent implements OnInit {

@Input()label!: string

@Input()formGroupName!: string

yearOptions = yearsGenerator()

constructor() { }

ngOnInit(): void {console.log(this.label)}

}


It is supposed to sit in this HTML here:

              <div class="formRow child listRow" formGroupName="atrialFibrillation">
                  <div class="col1">{{ "PMHX.CARDIAC.ATRIAL_FIBRILLATION" | translate }}</div>
                  <yes-no-toggle formControlName="present" vDisableSiblings></yes-no-toggle>
                  <div class="col3 yearWide">
                    <app-year-selector label='{{ "PMHX.DIAGNOSIS_YEAR" | translate }}' *ngIf="cardiacForm.get('atrialFibrillation.present')?.value"></app-year-selector>
                  </div>
              </div>

However, I am getting this error:

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

How do I use the formGroupName="atrialFibrillation" and have it work for this component?

I expected it to recognize the formControlName.

Answer 1

This is maybe a little bit different than what you want, but I have a somewhat similar situation where I have a nested component within a form. My nested component has an entire form in it that I want to add to my parent form. I believe this could work in your case to though.

Here's the basic setup in my child component: Add this to your @Component decorator.. typically right under your styleUrls line. This gives you access to the parent form.

viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]

Inject the the parent form into your child components constructor:

private parentForm: FormGroupDirective

Add your child control to your parent form inside of your ngOnInit:

this.parentForm.form.addControl('address', this.addressForm);

In my case I'm adding an entire nested form (this.addressForm) onto my parent form, but I believe you could add just a single form control as well.

This may or may not be applicable to your case, but I also remove the control from my parent form in my ngOnDestroy:

this.parentForm.form.removeControl('address');