CODEWITHSUNDEEP
typescript
Andrew Olinevich
Andrew Olinevich

Reputation: 61

Angular 2 NgModel+ value inside ngFor doesn't work

I working on a simple angular2 application.

I got a problem with ngModule + value inside ngFor. When I used ngModule the values inside form inputs doesn't show. If I remove ngModule all work perfectly. But I need to used ngModule. The data binding with help ngModule is working too.

This is my html code:

`<div class="col-xs-12" *ngFor="let data of homeData; let i = index">
   <div class="row">
    <div class="col-xs-12">
      <form (ngSubmit)= "updateAddress()">
        <div class="form-group">
          <input type="text" class="form-control"  value="{{data.companyAddress.address}}" name="address{{i}}" [(ngModel)]="address"/>
        </div>
        <div class="form-group">
          <input type="text" class="form-control"  value="{{data.companyAddress.city}}" name="city{{i}}" [(ngModel)]="city"/>
        </div>
        <div class="form-group">
          <input type="text" class="form-control"  value="{{ data.companyAddress.companyName }}" name="companyName{{i}}" [(ngModel)]="companyName"/>
        </div>
        <div class="form-group">
          <input type="text" class="form-control"  value="{{data.companyAddress.country}}" name="country{{i}}" [(ngModel)]="country"/>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" value="{{data.companyAddress.zipCode}}" name="zipCode{{i}}" [(ngModel)]="zipCode"/>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

    </div>
  </div>

`

And here my component:

export class AdminComponent implements OnInit {
homeData: Object; 
address: String;
city:String;
companyName: String;
country: String;
zipCode: String;

  constructor(
private adminServ: AdminService

  ) { }

  ngOnInit() {
  this.adminServ.getHomeData().subscribe(res => {
    if(res){
      this.homeData  = res;
      console.log(this.homeData);
    }
  });

  }

  updateAddress(){
    let newAddress = {
      address: this.address,
      city: this.city,
      companyName: this.companyName,
      country: this.country,
      zipCode: this.zipCode
    }
    console.log(newAddress);
  }

}

Thanks for help :)

Upvotes: 0

Views: 519

Answers (1)

JonasMH
JonasMH

Reputation: 1183

Assuming you want to change the value you are displaying, the value property is unnecessary since ngModel is a two-way bind. Also, the selector in ngModel is pointing at the controller and not the value you loop through. So the following code should fix it (for address, you can do the rest youself :) ):

<input type="text" class="form-control" name="address{{i}}" [(ngModel)]="data.companyAddress.address"/></div>

Upvotes: 1

Related Questions