在Ionic 3/Angular4中有条件添加表单到html模板

Question

我有一个屏幕，我想在不同的模式下使用.. 添加/更改/查询/删除。因此，在询价

/删除模式，我也不会用形式或输入字段..

我然后在NG-容器跨越一个问题来了是不是足够聪明，知道我是调理我的形式声明在两个单独的语句中输入字段介于两者之间。

此代码导致模板解析错误：

<ng-container *ngIf="useForm()"> 
    <form [formGroup]="gvarForm" 
     novalidate 
     (ngSubmit)="submit()"> 
</ng-container> 
.... 
<ng-container *ngIf="useForm()"> 
</form>  
</ng-container> 

错误：

Runtime Error 
Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" novalidate (ngSubmit)="submit()"> [ERROR ->]</ng-container> <ng-container *ngIf="useForm()"> </form> "): ng:///SharedModule/GvarDetailPage.html@30:6 Unexpected closing tag "form". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" </ng-container> <ng-container *ngIf="useForm()"> [ERROR ->]</form> </ng-container> </ion-content> "): ng:///SharedModule/GvarDetailPage.html@32:6 Unexpected closing tag "ion-content". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" </form> </ng-container> [ERROR ->]</ion-content> <ion-footer> <ion-toolbar> "): ng:///SharedModule/GvarDetailPage.html@34:0 
Stack 
Error: Template parse errors: 
Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" 
       novalidate 
       (ngSubmit)="submit()"> 
     [ERROR ->]</ng-container> 
     <ng-container *ngIf="useForm()"> 
     </form>  
"): ng:///SharedModule/GvarDetailPage.html@30:6 
Unexpected closing tag "form". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" 
     </ng-container> 
     <ng-container *ngIf="useForm()"> 
     [ERROR ->]</form>  
     </ng-container> 
</ion-content> 
"): ng:///SharedModule/GvarDetailPage.html@32:6 
Unexpected closing tag "ion-content". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" 
     </form>  
     </ng-container> 
[ERROR ->]</ion-content> 
<ion-footer> 
    <ion-toolbar> 
"): ng:///SharedModule/GvarDetailPage.html@34:0 
    at syntaxError (http://localhost:8100/build/vendor.js:79188:34) 
    at DirectiveNormalizer.normalizeLoadedTemplate (http://localhost:8100/build/vendor.js:91005:19) 
    at DirectiveNormalizer.normalizeTemplateSync (http://localhost:8100/build/vendor.js:90981:21) 
    at DirectiveNormalizer.normalizeTemplate (http://localhost:8100/build/vendor.js:90955:43) 
    at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:8100/build/vendor.js:91893:75) 
    at http://localhost:8100/build/vendor.js:92089:54 
    at Array.forEach (<anonymous>) 
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:8100/build/vendor.js:92088:41) 
    at http://localhost:8100/build/vendor.js:103284:58 
    at Array.forEach (<anonymous>) 

但这并不：

<ng-container *ngIf="useForm()"> 
    <form [formGroup]="gvarForm" 
     novalidate 
     (ngSubmit)="submit()"> 
    </form>  
</ng-container> 

这让我觉得我要去必须重写该事物并且不能使用DRY原则。

其他人碰到过吗？

Answer 1

那么，如果您只在表单中使用这些输入元素，那么为什么要将它们分开？

<ng-container *ngIf="useForm()"> 
    <form [formGroup]="gvarForm" 
     novalidate 
     (ngSubmit)="submit()"> 

    ... your input element goes here 

    </form>  
</ng-container> 

在单独的说明：如果在多个地方需要你的表格，你不想赘述 您可以创建窗体作为一个单独的组件，包括它在需要时。

例子：

<ng-container *ngIf="useForm()"> 
    <my-form></my-form> 

    .... some other code 

    <my-form></my-form> 

    .... some other code  
</ng-container>