Angular ReactiveForm with recursive template doesn't recognize parent formGroup directive

Question

In my app I construct formGroups dynamically from a config object that looks like this:

const formElements: FormElementInterface[] = [
 {
   type: 'formControl',
   defaultIsArray: false,
   defaultValue: 'Apfel',
   formControlName: 'fruits',
   htmlTag: 'mat-input',
   inputIype: 'text'
  } as InputFormControlInterface,
];

The FormElementInterface[] consists either of formControlobjects or formGroupobjects. The latter can contain formControls or more formGroups.

Constructing the actual formGroup, which is called completeForm as you will see in the template, went smoothly, but inside the template I met some problem and got this 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)

This is an excerpt from my template:

<form [formGroup]="completeForm">
 <div *ngFor="let formElement of forms">
  <ng-container
    *ngTemplateOutlet="formElement.type === 'formGroup' ? formGroup : formControl; context:{$implicit: formElement}">
  </ng-container>
 </div>
</form>

<ng-template #formControl let-formElement>
  <span [ngSwitch]="formElement.htmlTag">
    <div *ngSwitchCase="'mat-input'">
      <mat-form-field class="example-full-width">
        <input matInput [value]="formElement.defaultValue" formControlName="fruits">
      </mat-form-field>
    </div>
  </span>
</ng-template>

As you can see formGroup is set. Are the ng-template interfering?

I think *ngFor="let formElement of forms" should be ` *ngFor="let formElement of formElements"`. And when the ngFor should be inside the form, not on the same tag. right? — brandt.codes
– brandt.codes, Commented Nov 2, 2019 at 19:05
@brandt.codes *ngFor="let formElement of forms" is ok, inside the component class I call public forms = formElements;. Your second statement is indeed correct, but doesnt solve my problem. — acincognito
– acincognito, Commented Nov 2, 2019 at 21:28

acincognito · Accepted Answer · 2019-11-02 22:22:35Z

2

I found the solution: due to the ng-template formControlName isnt sufficient since ng-template kinda messes up the hierarchy in the template. Therefore the path to the formControl inside the formGroup must be provided like so:

<input matInput [value]="formElement.defaultValue" [formControl]="getFormControl(formElement.formControlName)">

answered Nov 2, 2019 at 22:22

acincognito

1,7531 gold badge16 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Angular ReactiveForm with recursive template doesn't recognize parent formGroup directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related