ngTemplateOutlet - Angular 5 nested template driven form

Question

I have a ng-template which is being passed on from one of my component and i have a placeholder to accept the passed on ng-template onto my component as shown below in ngTemplateOutlet.

<div>
<form novalidate #myForm="ngForm">
  <ng-container>
    <ng-template [ngTemplateOutlet]="myTemplate">
    </ng-template>
  </ng-container>
</form>
</div>

<!-- this template i am passing it from one of my other components -->
<ng-template #myTemplate>
  <input type="text" name="myInput" placeholder="Input"
    [(ngModel)]="inputModel" required/>
</ng-template>

The problem here is that my form('myForm') is ignoring the passed on ng-template eventhough it is marked as required. How can i make sure that my ngForm considers the passed on ng-template

already tried this fix but no luck - stackoverflow.com/questions/39242219/…. It will be better if i can handle it with a directive as provided in the above example itself — Nijas Nizam
– Nijas Nizam, Commented Nov 5, 2018 at 12:42
If you set the template outlet on the container? <ng-container *ngTemplateOutlet="myTemplate"></ng-container> Docs: NgTemplateOutlet — Silvermind
– Silvermind, Commented Nov 5, 2018 at 12:47
workaround below from saravana va works fine. This is probably a bug in Angular ngTemplateOutlet — Royalsmed
– Royalsmed, Commented Dec 4, 2019 at 17:26

saravana va · Accepted Answer · 2019-09-25 13:19:01Z

10

I found the answer and its very simple

Please move your code... inside your form tag

<div>
   <form novalidate #myForm="ngForm">
      <ng-container>
          <ng-template [ngTemplateOutlet]="myTemplate">
          </ng-template>
      </ng-container>
   </div>

      <!-- this template i am passing it from one of my other components -->
   <ng-template #myTemplate>
      <input type="text" name="myInput" placeholder="Input"
       [(ngModel)]="inputModel" required/>
     </ng-template>

  **</form>**

answered Sep 25, 2019 at 13:19

saravana va

1,1691 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sae Over a year ago

how about using with loop.?

Jandro Rojas Over a year ago

I can confirm this works. This should be set as the correct answer.

Kumar Over a year ago

This doesn't work in terms of using primeng templates, this does - stackoverflow.com/a/57992311/2990785

Collectives™ on Stack Overflow

ngTemplateOutlet - Angular 5 nested template driven form

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related