CODEWITHSUNDEEP
angularangular2-ngmodel
Draco
Draco

Reputation: 63

Binding model for multiple elements

I have a quite complex object which should be the model for a component.

It might look something like this:

{
    "attribute1": "value1",
    "attribute2": "value2",
    "attribute3": "value3",
    "attribute4": "value4",
    "attribute5": "value5",
    "attribute6": "value6",
    "attribute7": "value7",
    "attribute8": "value8"
}

This might be stored in the component in the public attribute named "iHaveAVeryLongButReadableName".

If I now have to create an input for each attribute in the model I have to write something like this:

<input [(ngModel)]="iHaveAVeryLongButReadableName.attribute1" >
<input [(ngModel)]="iHaveAVeryLongButReadableName.attribute2" >
<input [(ngModel)]="iHaveAVeryLongButReadableName.attribute3" >

And because all the inputs are different I can't use ngFor. (in the real world, not in this example)

With the old angularJS I could do something like this:

<div ng-model="iHaveAVeryLongButReadableName">
    <input ng-model="attribute1" >
    <input ng-model="attribute2" >
    <input ng-model="attribute3" >
</div>

Which you be MUCH easier and more readable.

Is there any solution for this redundant code?

I could create public attributes in the component to map the attributes, but still, the redundant code would just move from the HTML to the Typescript.

Any ideas?

EDIT

Thanks for the answers!

Sorry, but it might have been unclear, but *ngFor is not working for me. Every input is completly different from the other. The example seems to have been to simple. It looks more like this:

<div>

    <input ng-model="iHaveAVeryLongButReadableName.attribute1" type="date" >
    <input ng-model="iHaveAVeryLongButReadableName.attribute2" type="number" >
    <special-input-component ng-model="iHaveAVeryLongButReadableName.attribute3" >
    <div>
        <div>
            some structural information {{iHaveAVeryLongButReadableName.attribute3}}
        </div>
        <input ng-model="iHaveAVeryLongButReadableName.attribute3" />
    </div>
</div>

In this case *ngFor would not help me in any way. I could work with *ngFor and *ngIf but I think this would be much more complex than neccessary. The "old" way to change the scope for a DOM-tree element seemed to be easier for this case.

Upvotes: 2

Views: 1234

Answers (2)

AVJT82
AVJT82

Reputation: 73367

Angular has the keyvalue pipe, which you can iterate object properties with *ngFor.

So:

<div *ngFor="let val of iHaveAVeryLongButReadableName | keyvalue">
  <input [(ngModel)]="val.key">
</div>

StackBlitz

Upvotes: 3

Tiago Silva
Tiago Silva

Reputation: 2349

Yes you can actually iterate through the object keys by having a variable in the component

In the Component 

 objectKeys = Object.keys;
 iHaveAVeryLongButReadableName= {
    "attribute1": "value1",
    "attribute2": "value2",
    "attribute3": "value3",
    "attribute4": "value4",
    "attribute5": "value5",
    "attribute6": "value6",
    "attribute7": "value7",
    "attribute8": "value8"
}

then in your html just iterate through the keys like so :

<div *ngFor="let key of objectKeys(iHaveAVeryLongButReadableName)">

Let me know if it helped

Upvotes: 0

Related Questions