Dynamic form fields on angular

Question

is it possible to create a dynamic form control that iterates over properties of an object?

My goal is to expand an object "cluster.properties" and allow users to add any new pair of key/value. I'm able to print the values using the snippet below. But I'm not able to make this editable where users can change the key or value or even add more properties to the object.

<div ng-controller="MyCtrl">
  <div ng-repeat="(k,v) in cluster.properties">
    <input ng-model="k">
    <input ng-model="v">
  </div>

</div>

Is there a right way of doing this?

Regards

I think it's possible. I would create two methods: updateKey(k, v) and updateValue(k, v). In updateKey, you need to set cluster.properties[k] = undefined and move the v to the new cluster.properties[k]. This is what comes to mind when I first think about it... It's an interesting concept. I wanna try this! — Zach
– Zach, Commented Oct 12, 2016 at 19:49

Zach · Accepted Answer · 2016-10-12 20:32:40Z

1

Here ya go: http://plnkr.co/edit/xAgm0ny6yAB8spd5Oiai?p=preview

You could probably simplify this and store the original values in hidden fields to see if they changed and reduce it to just one update button per repeat, but this is a start!

<div ng-repeat="(k,v) in myCtrl.myObject">
  <input type="hidden" ng-model="k">
  <div>
    Key: <input ng-model="newKey" ng-value="k" />
    <button ng-click="myCtrl.updateKey(k, newKey, v)">Update</button>
  </div>
  <div>
    Value: <input ng-model="v" />
    <button ng-click="myCtrl.updateValue(k,v)">Update</button>
  </div>
  <hr />
</div>

and the functions:

vm.updateKey = function(k, newKey, v) {
  // newKey will be undefined if nothing changed

  // Check to see if it changed
  if(k != newKey && newKey !== undefined) {
    // If it's empty... delete it
    if(newKey != '') {
      vm.myObject[newKey] = v;
    }
    delete vm.myObject[k];
  }
};

vm.updateValue = function(k, v) {
  vm.myObject[k] = v;
};

Some other considerations you should take into account are: what if the new property name conflicts with another? Also - my comment above about setting it to undefined isn't sufficient. You need to use the delete keyword or else it will not update the ng-repeat properly.

answered Oct 12, 2016 at 20:32

Zach

3,2071 gold badge23 silver badges36 bronze badges

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

2 Comments

Vinicius Carvalho Over a year ago

Thanks, this looks really nice. I ended up using a separate array of {key:"",value:""} objects that I flatten into a { key:value } object before sending to the backend

Zach Over a year ago

Ok. That's another way of doing it! :D

charlietfl · Accepted Answer · 2016-10-12 20:00:32Z

0

In javascript you can't dynamically change an existing object property name.

My suggestion is to edit existing ones you create a button with a function that that copies the key and value to another set of inputs and if the key gets edited you will need to create a new property and remove the old one

edited Oct 12, 2016 at 20:00

answered Oct 12, 2016 at 19:50

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Dynamic form fields on angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related