Angular FormGroup: How to move formControlName to a ng-template outside FormGroupName?

Question

This code is working:

<form id="list" [formGroup]="Form">
  <ion-list lines="none" class="list">
    <ion-item-sliding formArrayName="things" *ngFor="let item of formArray.controls; index as index"> 
        <ion-item [formGroupName]="index">

          <ng-container [ngTemplateOutlet]="thingText" [ngTemplateOutletContext]="{item:item, index:index}"></ng-container>

          <ng-template #thingText let-item="item" let-index="index">
            <ion-textarea id="thing-text" formControlName="content" auto-grow 
              value="{{ item.value.content }}" 
              (click)="activateEditing(index)"
              (ionBlur)="leaveTheField(index)" 
              (keypress)="detectChange(index)"
              (ionFocus)="changeScroll(index)" #activeThings>
            </ion-textarea>
          </ng-template>

        </ion-item>
    </ion-item-sliding>
  </ion-list>
</form>

But I want to move the ng-template outside the form. However, when I do, I get an Error: formControlName must be used with a parent formGroup directive..

Then I tried to pass the formGroup to the ng-template:

<ng-container [ngTemplateOutlet]="thoughtText" [ngTemplateOutletContext]="{formGroup: Form, item:item, index:index}"></ng-container>

(...)

<ng-template #thoughtText let-item="item" let-index="index" let-formGroup="formGroup">
  <div [formGroup] = "formGroup">
    <ion-textarea id="thing-text" formControlName="content" auto-grow
                  value="{{ item.value.content }}"
                  (click)="activateEditing(index)"
                  (ionBlur)="leaveTheField(index)"
                  (keypress)="detectChange(index)"
                  (ionFocus)="changeScroll(index)" class="active-text form-control" #activeThing>
    </ion-textarea>
  </div>
</ng-template>

But it didn't work. I get the ´Error: Cannot find control with name: 'content'`

What do I have to do to move the ng-template outside the form?

score 0 · Answer 1 · answered Jun 20 '22 at 05:35

One way is to pass formControlName to ng-template and use [formControl]. See below.

<ng-container [ngTemplateOutlet]="thoughtText" 
              [ngTemplateOutletContext]="{formGroup: Form, item:item, index:index, formControlName: 'content'}"></ng-container>

(...)

<ng-template #thoughtText let-item="item" let-index="index" let-formGroup="formGroup" let-formControlName="formControlName">
  <div [formGroup] = "formGroup">
    <ion-textarea id="thing-text" [formControl]="formGroup.get(formControlName)" auto-grow
                  value="{{ item.value.content }}"
                  (click)="activateEditing(index)"
                  (ionBlur)="leaveTheField(index)"
                  (keypress)="detectChange(index)"
                  (ionFocus)="changeScroll(index)" class="active-text form-control" #activeThing>
    </ion-textarea>
  </div>
</ng-template>

Then I'm getting `Error: Cannot find control with unspecified name attribute` — João Otero, Jun 20 '22 at 17:03
If I do `[formControl]="formGroup.controls.things.controls[index].get(formControlName)"` then it woks... But I did't quite understand, though... — João Otero, Jun 20 '22 at 17:25

Angular FormGroup: How to move formControlName to a ng-template outside FormGroupName?

1 Answers1