Access form inside ng-template in a template driven form

Issue

<form #f="ngForm">
  <ng-container *ngTemplateOutlet="template"></ng-container>
  {{f.controls.formInput.value}} // gives error
  <ng-template #template>
    <div class="reusable-control">
      <input ngModel name="formInput">
    </div>
  </ng-template>
</form>

As you can see, I'm accessing formInput after the ng-container but getting an error. What am I doing wrong?

Solution

By default it has nothing to display, it's empty. You have not bound the the input to anything. The form and value currently as it is, exists only in template. If you add [(ngModel)]="input" and input = 'test' to TS it would have something.

Template: 
<form #f="ngForm">
  <ng-container *ngTemplateOutlet="template"></ng-container>

  <ng-container *ngIf="f.controls.formInput?.value">
    {{f.controls.formInput.value}}
  </ng-container>

  <ng-template #template>
    <div class="reusable-control">
      <input [(ngModel)]="input" name="formInput">
    </div>
  </ng-template>
</form>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  input = 'test';

  ngOnInit() {}
}

Working example: https://stackblitz.com/edit/angular-ivy-q9usk3?file=src%2Fapp%2Fapp.component.html

Answered By - Joosep Parts