Question

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

因此，在查询/删除模式中，我不会使用表单或输入字段..

然后我遇到了一个问题，因为ng-container不够智能，以至于我意识到我在两个单独的语句中调整了我的表单语句，其间有输入字段。

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

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

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

1 个答案: