Les valeurs dynamiques sont réinitialisées lors de l'ajout d'un nouveau champ de saisie dans Form | Angulaire 4

Question

J'ai un formulaire avec un champ téléphonique, lorsque vous cliquez sur le bouton Ajouter, un nouveau champ apparaît. Ce qui se passe est que lorsque je clique sur Ajouter, la valeur tapée sur les champs précédents est réinitialisée. J'ai réussi à le faire fonctionner en supprimant les balises "form", mais j'ai besoin de ce formulaire sur mon projet. Comment puis-je le faire fonctionner en utilisant "formulaire"?

HTML

<form> 
    <div *ngFor="let phonecount of phonecount; let i = index" class="form-group"> 
<label>Optional Phone </label> 
<input type="text" class="form-control" [(ngModel)]="user.extraphones[i]" name="phone2"> 
</div> 
<input (click)="onSubmito()" type="submit" value="Add" class="btn btn-primary"> 
</form> 

TS

user = { 
      name:'', 
      phone:'', 
      extraphones:[] 
     }; 
    namee=''; 
    phonecount:string[]=['']; 
onSubmito(){ 
    this.phonecount.push(this.namee); 
} 

Punkler: https://plnkr.co/edit/i85x1m?p=preview

Answer 1

Assurez-vous lier à la bonne chose. De même, assurez-vous qu'une collection correcte est mise à jour lorsque l'utilisateur clique sur "Ajouter". Après avoir mieux compris le problème, j'ai trouvé this SO answer et this GitHub issue.

a pu résoudre votre problème ... Notez les choses suivantes:

• trackBy:trackById dans le modèle et trackById fonction dans le code tapuscrit.
• name attribut sur le champ <input>.

---

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {FormsModule} from '@angular/forms' 
import {BrowserModule} from '@angular/platform-browser' 

export class Info { 
    id: number; 
    description: string; 
} 

    @Component({ 
     selector: 'my-app', 
     template: ` 
     <form> 
     <div *ngFor="let ph of user.extraphones; let i = index; trackBy:trackByIndex" class="form-group"> 
     <label>Optional Phone</label> 
     <input type="text" class="form-control" 
      [(ngModel)]="user.extraphones[i]" name="item-{{i}}"> 
     </div> 
     <input (click)="onSubmito()" type="submit" value="Add" class="btn btn-primary"> 
    </form> 

     {{ user.extraphones | json }} 
     `, 
    }) 
    export class App { 
     user = { 
       id:'', 
       _id:String, 
       name:'', 
       phone:'', 
       extraphones:['123', '345', '678'], 
       rank:'' 
      }; 

     namee=''; 

     onSubmito(){ 
     this.user.extraphones.push(this.namee); 
     } 

     trackByIndex(index: number, value: number) { 
     return index; 
     } 
     } 
    } 

@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}