Comment utiliser Formgroup et réagir le formulaire en angular2 pour fixer problmes de TextBox

Question

générés j'utilise angular2 dans mon projet, j'ai un service qui retourne cet objet JSON:

produits = { « départ »: » New York "," arrivée ":" California "," stations ": [{" station ":" toto "}, {" station ":" titi "}, {" station ":" tata "}]}

j'ai essayé de remplir cet objet JSON dans l'interface utilisateur comme le montre cette image: here's what the result looks like

Heres c ode:

<div class="panel-body panelcolor"> 

<div *ngIf="items?.departure"> 
    <span>{{items.departure}}</span> --> 
    <span *ngIf="items.stations.length > 0"> 
     {{items.stations[0].station}} 
    </span> 
    <span *ngIf="items.stations.length === 0"> 
     {{items.arrival}} 
    </span> 

    <div class="input-group spinner"> 
     <input type="text" formControlName="price" class="form-control"> 
     <div class="input-group-btn-vertical"> 
      <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button> 
      <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> 
     </div> 
    </div> 
</div>  

<div *ngFor="let item of items.stations; let i=index, let last = last"> 

    <div *ngIf="!last"> 
     <span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">{{items.stations[i+1].station}}</span> 
     <div class="input-group spinner"> 
      <input type="text" formControlName="price" class="form-control"> 
      <div class="input-group-btn-vertical"> 
       <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button> 
       <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> 
      </div> 
     </div> 
    </div> 

</div> 

<div *ngIf="items?.arrival && items?.stations.length > 0"> 
    <span>{{items.stations[items.stations.length-1].station}}</span> --> <span>{{items.arrival}}</span> 
    <div class="input-group spinner"> 
     <input type="text" formControlName="price" class="form-control"> 
     <div class="input-group-btn-vertical"> 
      <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button> 
      <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> 
     </div> 
    </div> 
</div> 

<button style="margin-left: 479px;"> Submit </button> 

mon problème est quand je l'ai essayé clic (vers le haut ou vers le bas) la fileuse pour modifier la valeur de la zone de texte, toutes les zones de texte changer sa toute personne value.can aider à satisfaire à résoudre ce problème ? J'ai essayé d'utiliser formgroup pour résoudre ce problème mais je n'ai pas réussi à le réparer.

Answer 1

Je ne sais pas ce que vous avez dans les fonctions spinnerPriceUp() et spinnerPriceDown().

Vous exécutez textBox depuis l'intérieur d'une boucle ngFor. C'est pourquoi toutes les zones de texte restituées à partir de cette boucle obtiennent ciblées pour le changement de valeur.

Une façon de résoudre ce problème consiste à attribuer des ID dynamiques à l'élément .

<input [attr.id]="'textbox' + i"> 

'i' étant l'indice & 'textbox' est un texte pour l'ID.

maintenant vous avez des identifiants uniques à vos zones de texte. En outre, vous pouvez transmettre ces ID aux fonctions exécutant la mise à jour.

Espérons que cela résout votre problème