Dynamic values get reset when adding new Input field inside Form | Angular 4

Question

I have a form with a telephone field, when you click on the Add button, a new field will appear. What is happening is that when I click on Add, the value typed on the previous fields get reset. I managed to make it work by removing the "form" tags, but I need this form on my project. How can I make it work using "form"?

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

phonecount and user.extraphones are not related by any means. This is the root of your issue. — Igor Soloydenko
– Igor Soloydenko, Commented Oct 16, 2017 at 0:12

Igor Soloydenko · Accepted Answer · 2017-10-16 01:44:42Z

3

Make sure you're binding to the right thing. Similarly, make sure that a proper collection is being updated when use clicks "Add".

After understanding you problem better I found this SO answer and this GitHub issue.

Was able to fix your issue... Notice the following things:

trackBy:trackById in template and trackById function in typescript code.
name attribute on <input> field.

//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 {}

edited Oct 16, 2017 at 1:44

answered Oct 16, 2017 at 0:15

Igor Soloydenko

11.9k11 gold badges56 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gustavo Over a year ago

I will try this. But wouldn't changing the input ngmodel to 'phone' makes it insert into phone property instead of extraphones?

Igor Soloydenko Over a year ago

@Gustavo I have modified both the template and the TS code so that it's easier for you to understand, what's going on. I also strongly recommend you using better names.

Gustavo Over a year ago

The array values sent on this form is not as expected. It's getting the 'namee' property value and adding to all array values except the first one (I'm sending this trough a REST API). I changed the namee value on TS to = 'somedata' to explain better. Here's what's happen when I send 3 fields with different values: extraphones:(3) ["", "somedata", "somedata"]

Igor Soloydenko Over a year ago

@Gustavo now I see shy. Storing phones as array of strings is a horrible idea for many reasons. One of them is that Angular will not be able to detect the changes (since string is a primitive type) unless we specially instruct it. Notice name attribute on input tag; and trackById function. Read about them to get a better idea about what's going on.

Igor Soloydenko Over a year ago

Hope I answered your question this time :)

Collectives™ on Stack Overflow

Dynamic values get reset when adding new Input field inside Form | Angular 4

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related