0

I'd like to iterate over multiple input fields which are defined like this:

<input placeholder="Name" name="name" value="x.y">
<input placeholder="Description" name="description" value"x.z">
<!-- And more fields -->

or like this:

<input *ngFor="let x of y" name="{{x}}" value="{{x.y}}">

Now I want to interate over them, edit their value and give the edited values back to the input field.

Leonzen
  • 1,195
  • 5
  • 13
  • 30
  • What is x.y and y.z here? Are you trying to iterate over object keys to generate inputs for that object? – RUKAclMortality Sep 25 '17 at 12:42
  • Yes I'm iterating over objects. I'm requesting an object with an http request and fill the input fields with the value I'm getting. I want to edit those values and send for example a put or post request back to the server. – Leonzen Sep 25 '17 at 12:46

2 Answers2

1

Is this what you are looking for ?

<input *ngFor="let x of y" [name]="x.name" [(ngModel)]="x.value">
Mike Trinh
  • 1,271
  • 2
  • 9
  • 19
0

Try the following (*component.html):

<div>
  <input type="text" *ngFor="let key of myObjectKeys"
    [placeholder]="key"
    [name]="key"
    [(ngModel)]="myObject[key]" />
</div>
<div>
  {{ diagnostic() }}
</div>

inside the *component.ts class body:

myObject = { Name: '', Description: '' }
myObjectKeys = Object.keys(this.myObject)

diagnostic() {
  return JSON.stringify(this.myObject)
}

... you could also use a pipe to get object keys:

https://stackoverflow.com/a/35536052/2644437

*note: to use ngModel directive in angular 4 you also need FormsModule to be imported in the module your component is declared:

import { FormsModule } from '@angular/forms';
//...
imports: [
    //...
    FormsModule
  ]
RUKAclMortality
  • 175
  • 1
  • 13