In Angular how to segregate the part of reactive form in seperate ng-template (s) inside same...

I want to use some part of the angular reactive form will come from an ng-template. Seperating in different component will work fine with ngViewProviders. But I want to achieve it via ng-template.

<h1>Test Reactive Form</h1>
<form [formGroup]="form">
<ng-container
[ngTemplateOutlet]="formArray"
[ngTemplateOutletContext]="{formGroup:form, arrayName:test}"
></ng-container>
</form>
{{form.value | json}}

<ng-template #formArray let-formGroup="formGroup" let-arrayName="arrayName" >

<ng-container [formGroup]="formGroup">
<div formArray="arrayName">
<ng-container *ngFor="let t of arrayName.controls;let i = index;" [formGroupName]="i">
{{formGroup.value | json}}
<input type="text"/>
</ng-container>
</div>
</ng-container>
</ng-template>
`,
})
export class App {
name = 'Angular';
form;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
test: this.fb.array([]),
});

const test = this.fb.group({
name: 'Test name',
});
this.test.push(test);
const test_1 = this.fb.group({
name: 'test name 2',
});
this.test.push(test_1);
}

get test(): FormArray {
return this.form.get('test') as FormArray;
}


Getting erro like ERROR Error: Cannot find control with name: '0'

Stackbitz link: https://stackblitz.com/edit/angular-9jmcfq?file=src/main.ts

Continue reading...