angulaire - masquer/afficher les sections réinitialiser les données de formulaire

Question

J'ai un form avec quelques input champs et un champ select, comme ci-dessous:

<div class="form-row "> 
<div on-click="datiReferentiBancaClicked = !datiReferentiBancaClicked"></div> 
<div class="form-row" *ngIf="!datiReferentiBancaClicked"> 
<label>Nome</label> 
<input type="text" id="refbnkNome" [ngModel]="richiesta.refbnkNome" formControlName="refbnkNome" placeholder="Nome"> 
</div> 
</div> 

La première div permet de basculer la seconde. Le problème est que lorsque je cache la seconde div et que j'ai des données dans les champs, ces données se réinitialisent comme les div peaux. Pourquoi cela arrive-t-il? Dois-je définir une propriété? Merci.

Answer 1

Utilisez ngHide au lieu de ngIf. Il ne fera que réduire l'élément et le rendre invisible alors que ngIf le renomme complètement du DOM.

Answer 2

Vous pouvez utiliser [ngStyle] = "myFunction" pour cacher votre div au lieu de * ngIf

Ensuite, dans votre composant:

myFunction() { 
    if (!datiReferentiBancaClicked) 
    return {'visibility':'visible'} 
    else 
    return {'visibility':'hidden'} 
} 

ou

se lient à l'attribut [caché] * NgIf supprime l'élément du DOM où visibilité: hidden doesn ot.

Answer 3

<div class="form-row"> 
<div ng-click="datiReferentiBancaClicked = !datiReferentiBancaClicked">Toggle</div> 
<div class="form-row" ng-show="!datiReferentiBancaClicked"> 
<label>Nome</label> 
<input type="text" id="refbnkNome" ng-model="richiesta.refbnkNome" placeholder="Nome"> 
</div> 
<div class="form-row" ng-hide="datiReferentiBancaClicked"> 
// if datiReferentiBancaClicked is true!. This div will be active! 
</div> 
</div> 
// This code is example for toggle