Ajout conditionnel d'un formulaire à un modèle html dans Ionic 3/Angular4

Question

J'avais un écran que je voulais utiliser dans différents modes. Ajouter/Modifier/Interroger/Supprimer.

Donc, dans l'enquête/Supprimer les modes Je ne serais pas à l'aide des champs de formulaire ou d'entrée ..

je suis tombé alors sur une question dans ce ng-conteneur n'a pas été assez intelligent pour réaliser que je suis conditionné ma déclaration de formulaire dans deux déclarations séparées avec des champs d'entrée entre.

Ce code a provoqué une erreur d'analyse de modèle:

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

L'erreur:

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

Mais cela ne:

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

Cela me fait penser que je vais avoir à réécrire la chose et ne peut pas utiliser le principe DRY.

Quelqu'un d'autre trouve cela?

Answer 1

Eh bien, si vous utilisez ces éléments d'entrée uniquement dans votre formulaire, alors pourquoi les séparer?

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

    ... your input element goes here 

    </form>  
</ng-container> 

On note séparée: Si votre formulaire est nécessaire à plusieurs endroits et vous ne voulez pas les répéter Vous pouvez créer votre formulaire en tant que composante distincte et inclure chaque fois que nécessaire.

Exemple:

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

    .... some other code 

    <my-form></my-form> 

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