in Angular inside ngtemplateoutlet unable to access formcontrol of form control name

Question

i create stackblitz project

https://stackblitz.com/edit/new-project-jksckf?file=src%2Fapp%2Fform-field-overview-example.ts,src%2Fapp%2Fform-field-overview-example.html

If i pass formcontrolname to ng-template using ngtemplateoutlet it is showing Error

if i use formControlName i am getting this error

Console was cleared ERROR 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).

Example:

`<div [formGroup]="myGroup">

` In your class:

this.myGroup = new FormGroup({ firstName: new FormControl() }); if i use formControl i am getting another error..

i need to dynamicaly pass the formcontrolname

Answer 1

You can pass the own control

<ng-container *ngTemplateOutlet="dynamicCtrl;
            context:{data:{control:testForm.controls?.age,label:'Age'}}">
</ng-container>

<ng-template #dynamicCtrl let-data="data">
  <label>{{data.label}}</label>
  <input [formControl]="data.control" />
</ng-template>

If you has a variable

field="age"

You can use

<ng-container *ngTemplateOutlet="dynamicCtrl;
            context:{data:{control:testForm.get(field),label:'Age'}}">
</ng-container>