【问题标题】:ngTemplateOutlet - Angular 5 nested template driven formngTemplateOutlet - Angular 5 嵌套模板驱动表单
【发布时间】:2019-04-08 19:51:53
【问题描述】:

我有一个 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>

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

【问题讨论】:

  • 已经尝试过此修复但没有运气 - stackoverflow.com/questions/39242219/…。如果我可以使用上面示例中提供的指令来处理它会更好
  • 如果在容器上设置模板出口? &lt;ng-container *ngTemplateOutlet="myTemplate"&gt;&lt;/ng-container&gt; 文档:NgTemplateOutlet
  • 试过了没啥区别
  • 你有解决办法吗?我有同样的问题
  • saravana va 下面的解决方法工作正常。这可能是 Angular ngTemplateOutlet 中的一个错误

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


【解决方案1】:

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

请将您的代码...移到您的表单标签内

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

【讨论】:

  • 使用 with loop 怎么样?
  • 我可以确认这是可行的。这应该设置为正确答案。
猜你喜欢
  • 1970-01-01
  • 2018-04-09
  • 2017-01-07
  • 1970-01-01
  • 2017-01-30
  • 2017-01-30
  • 1970-01-01
  • 1970-01-01
  • 2020-10-11
相关资源
最近更新 更多