Angular FormGroup:如何将formControlName移动到FormGroupName之外的ng模板?

Question

代码正常运行:

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

但是我想把ng-template移到表单外面。然而，当我这样做时，我得到一个Error: formControlName must be used with a parent formGroup directive.。

然后我尝试将formGroup传递给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>

但它没有工作。我得到' Error: Cannot find control with name: 'content' '

我该怎么做才能把ng-template移出表单?

Answer 1

一种方法是将formControlName传递给ng-template并使用[formControl]。见下文.

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