How to create an object from form data in Angular

Question

I have a pretty complex object that I need to send from a form in Angular.

Basically the object looks like this:

vm.formData = {
   active: 1,
   parse_tree : {
       exlude: [],
       include: [],
       tag: ''
   },
   tag: '',
   term: ''
}

My problem is creating new objects inside the include or exclude arrays.
Not sure how to do that.

Basically if you type in a tag name inside the row with "With all of these" as the label, it needs to create a new object inside of the include array, and if you click the checkbox 'Exact match' next to the tag input, it needs to add exact : 1. If 'Exact match' is unchecked, then exact : 0.

parse_tree : {
   exlude: [],
   include: [
       {
           exact: 1,
           term: "hello"
       }
   ],
   tag: ''
}

My form HTML:

<div class="row">
    <div class="col-sm-2 advanced-label">Main Tag:</div>
    <div class="col-sm-4">
        <input ng-model="tc.formData.term"
               id="new-main-tag"
               type="text"
               class="form-control"
               placeholder="tag">
        <input ng-model="tc.formData.parse_tree.include.obj.exact"
               ng-true-value="1" ng-false-value="0"
               for="new-main-tag"
               type="checkbox">
        <em>Exact match</em>
    </div>
    <div class="col-sm-4">
        <select ng-model="tc.formData.tag"
            class="form-control manage-source-input-tag">
            <option value="companies">companies</option>
            <option value="news" selected="">news</option>
            <option value="people">people</option>
            <option value="products">products</option>
        </select>
    </div>
    <div class="col-sm-2">
        <button ng-click="tc.showSimpleForm()"
            class="btn btn-info btn-sm switch-btn">Switch to simple</button>
    </div>
</div>

<div class="row">
    <div class="col-sm-2 advanced-label">
        With all of these:
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll1"
               id="with-all-1" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-1">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll2"
               id="with-all-2" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-2">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll3"
               id="with-all-3" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-3">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll4"
               id="with-all-4" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-4">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withAll5"
               id="with-all-5" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-all-5">
        <em>Exact match</em>
    </div>
</div>

<div class="row">
    <div class="col-sm-2 advanced-label">
        With none of these:
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-1" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-1">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-2" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-2">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-3" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-3">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-4" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-4">
        <em>Exact match</em>
    </div>
    <div class="col-sm-2">
        <input ng-model="tc.withNone1"
               id="with-none-5" type="text" class="form-control" placeholder="tag">
        <input type="checkbox" for="with-none-5">
        <em>Exact match</em>
    </div>
</div>

<div class="row">
    <div class="col-sm-2 advanced-label">Tag Notes:</div>
    <div class="col-md-5">
        <textarea></textarea>
        <input type="checkbox" aria-label="exact-match">
        <em>Unsure</em>
    </div>
    <div class="col-md-5"></div>
</div>

<div class="row advanced-action-row">
    <button class="btn btn-success btn-sm manage-term-add">Save</button>
</div>

Petr Averyanov · Accepted Answer · 2015-03-20 16:24:50Z

1

For includes: (do same for excludes)

vm.formData = {
   active: 1,
   parse_tree : {
       exlude: [],
       include: [{}, {}, {}, {}, {}],
       tag: ''
   },
   tag: '',
   term: ''
}

Use ng-repeat:

<div class="col-sm-2" ng-repeat="smth in vm.formData.parse_tree.include">
    <input ng-model="smth.term" type="text" class="form-control" placeholder="tag">
    <input type="checkbox" ng-model="smth.exact">
    <em>Exact match</em>
</div>

Now if u really need exact:1 and nothing otherwise, modify checkbox:

<input type="checkbox" ng-click="change(smth)">

In controller define change func:

if (smth.term) {
  delete smth.term;
} else {
  smth.term = 1;
}

answered Mar 20, 2015 at 16:24

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

3 Comments

Leon Gaban Over a year ago

OMG nice! Thanks :) didn't think to use ng-repeat that way on the formData object!

Petr Averyanov Over a year ago

Mb you forgot to fill exclude array?

Leon Gaban Over a year ago

I miss-spelled something, this is an awesome solution!

Collectives™ on Stack Overflow

How to create an object from form data in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related