6

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

Nijas Nizam
  • 151
  • 7
  • already tried this fix but no luck - https://stackoverflow.com/questions/39242219/angular2-nested-template-driven-form/45307924#45307924. It will be better if i can handle it with a directive as provided in the above example itself – Nijas Nizam Nov 05 '18 at 12:42
  • If you set the template outlet on the container? `` Docs: [NgTemplateOutlet](https://angular.io/api/common/NgTemplateOutlet) – Silvermind Nov 05 '18 at 12:47
  • Tried it doesn't make any difference – Nijas Nizam Nov 05 '18 at 12:57
  • Have you got a solution to this? I have the same issue – Josf Jul 31 '19 at 04:30
  • workaround below from saravana va works fine. This is probably a bug in Angular `ngTemplateOutlet` – Royalsmed Dec 04 '19 at 17:26

1 Answers1

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>**
saravana va
  • 1,081
  • 1
  • 13
  • 17