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