CODEWITHSUNDEEP
angularangular-forms
karthikaruna
karthikaruna

Reputation: 3236

Access form inside ng-template in a template driven form

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

Upvotes: 0

Views: 1479

Answers (2)

kalit
kalit

Reputation: 266

In Angular v13 it's working for me

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

Upvotes: 1

Joosep Parts
Joosep Parts

Reputation: 6235

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

Upvotes: 0

Related Questions