ngTemplateOutlet - Angular 5 嵌套模板驱动表单 [英] ngTemplateOutlet - Angular 5 nested template driven form
问题描述
我有一个从我的一个组件传递的 ng-template,我有一个占位符来接受传递到我的组件上的 ng-template,如下面的 ngTemplateOutlet 所示.
<form novalidate #myForm="ngForm"><ng-容器><ng-template [ngTemplateOutlet]="myTemplate"></ng-模板></ng-容器></表单><!-- 这个模板我是从我的其他组件之一传递它的--><ng-template #myTemplate><input type="text" name="myInput" placeholder="Input"[(ngModel)]="inputModel" required/></ng-模板>
这里的问题是我的表单('myForm')忽略了传递的 ng-template 即使它被标记为必需的.我如何确保我的 ngForm 考虑传递的 ng-template
我找到了答案,而且很简单
请将您的代码...移到表单标签中
<form novalidate #myForm="ngForm"><ng-容器><ng-template [ngTemplateOutlet]="myTemplate"></ng-模板></ng-容器><!-- 这个模板我是从我的其他组件之一传递它的--><ng-template #myTemplate><input type="text" name="myInput" placeholder="Input"[(ngModel)]="inputModel" required/></ng-模板>**</表格>**
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
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>**
这篇关于ngTemplateOutlet - Angular 5 嵌套模板驱动表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!