ngTemplateOutlet-Angular 5嵌套模板驱动的表单

时间:2018-11-05 12:40:56

标签: angular nested-forms angular-forms ng-template

我有一个从组件之一传递过来的ng-template,并且我有一个占位符,可以将传递的ng-template接受到我的组件上,如下面的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>

这里的问题是我的form('myForm')忽略了传递的ng-template,即使它被标记为必需。我如何确保我的ngForm考虑传递的ng-template

1 个答案:

答案 0 :(得分:2)

我找到了答案,而且非常简单

请在表单标签内移动代码...

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