Conditionally adding a form to a html template in Ionic 3/Angular4

Question

I had a screen which I wanted to use in different modes.. Add/Change/Inquiry/Delete.

So in Inquiry/Delete modes I wouldn't be using form or input fields..

I then came across an issue in that ng-container wasn't smart enough to realise I was conditioning my form statement in two separate statements with input fields in between.

This code caused a template parser error:

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

The error:

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

But this does not:

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

This makes me think I'm going to have to rewrite the thing and can't use the DRY principle.

Anyone else come across this?

Answer 1

Well if you are using those input elements inside your form only, then why to keep them separate?

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

     ... your input element goes here

   </form>    
</ng-container>

On separate note: If your form is required in multiple places and you don't want to repeat them You can create your form as a separate component and include it whenever required.

Example:

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

  .... some other code

  <my-form></my-form>

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