Angular-当ng模板的作用域更改时绑定到formControlName

Question

我有一个angular ng模板，当模板在其父formArray中时，它会正确地为formControlName分配索引值，但当移动到数组之外时，它无法这样做。

以下工作：

<div formArrayName="searchLimits" *ngIf="!sectionCollapseState?.searchLimits">
<!-- template inside array -->
<ng-template #checkboxSetTemplate let-upper="displayCount" let-sectionName="sectionName">
<div *ngFor="let item of [0, 1]; let i = index;"
class="col-md-12">
<label [ngClass]="this.modelService.getClassMap(item)">

<!-- 'ng-reflect-name' is assigned 'i' in rendered page, as expected -->
<input type="checkbox" [formControlName]="i" />
...
</label>
</div>
</ng-template>
</div>

但以下情况并非如此：

<div formArrayName="searchLimits" *ngIf="!sectionCollapseState?.searchLimits">
</div>
<!-- template outside of array -->
<ng-template #checkboxSetTemplate let-upper="displayCount" let-sectionName="sectionName">
<div *ngFor="let item of [0, 1]; let i = index;"
class="col-md-12">
<label [ngClass]="this.modelService.getClassMap(item)">

<!-- 'ng-reflect-name' is assigned 'i' in rendered page, as expected -->
<input type="checkbox" [formControlName]="i" />
...
</label>
</div>
</ng-template>

数组中的以下指令使用上述模板：

<div>
<ng-template [ngTemplateOutlet]="checkboxSetTemplate" [ngTemplateOutletContext]="{displayCount: SearchLimits?.length,
sectionName: SearchLimits}">
</ng-template>
</div>

关联的TypeScript:

private buildForm() {
this.searchForm = new FormGroup({
refinements: this.formBuilder.group({
searchLimits: this.formBuilder.array([]),
keywords: new TextboxControl(null)
})
}, this.searchService.formHasUserDataValidator());
}

有人能告诉我如何在数组范围之外创建一个工作模板吗？

非常感谢

棒

Answer 1

由于formControlName位于父formGroup之外，因此它不起作用。

试试这个：

change[formControlName]===>[formControl]。

<!-- template outside of array -->
<ng-template #checkboxSetTemplate let-upper="displayCount" let-sectionName="sectionName">
<div *ngFor="let item of [0, 1]; let i = index;"
class="col-md-12">
<label [ngClass]="this.modelService.getClassMap(item)">
<!-- 'ng-reflect-name' is not present in rendered page, but is expected -->
<input type="checkbox" [formControl]="i" />
...
</label>
</div>
</ng-template>