CODEWITHSUNDEEP
javascripthtmlangularjsformsobject
user4339580
user4339580

Reputation:

Create object from Form inputs to pass to controller method

I have an array of jobs in my js/controller. Each job object in the array has attributes like jobName, company, city, etc. Is it possible by submitting a form with inputs for the attributes to make it into a job object and then push it into the jobs array in the controller?

So for example, I have a form and I input Software Developer, StackOverflow, NY. Can I wrap the form into an object with the correct attributes and then pass it into the array of jobs in the controller to view it on the view?

Here's my form code so far...

        <form name="jobForm" ng-submit="list.addJob(jobForm)">
                <div class="form-group" id="test">
                    <label>Job Name:</label>
                    <input ng-model="jobName" type="text"/>
                </div>
                <div>
                    <label>Company:</label>
                    <input ng-model="companyDescription" type="text"/>

                    <div><button type="submit">Enter job entry</div>
                </div>

                <!-- this is where the live preview is. ng-model in the input binds it to these values -->
                <blockquote>
                <h4><u>Live Preview</u></h4>
                    <b>Job Name:</b> {{jobName}}
                    <div><b>Company:</b>{{companyDescription}}</div>
                </blockquote>
      </form>

So I want to create a JOB object using the jobName and companyDescription's inputs as the object's name and company attribute. How can I do this? OR am i using a wrong approach. Thank you for the help!

Upvotes: 0

Views: 100

Answers (1)

charlietfl
charlietfl

Reputation: 171669

For starters there is a golden rule that ng-model should always be an object property to begin with ... or you can run into lots of child scope problems due to inheritance

So your whole issue is simplified by not using individual scope properties and using one object for all the ng-model in the form to begin with

$scope.job={}
<input ng-model="job.jobName" type="text"/>
<input ng-model="job.companyDescription" type="text"/>

Then when you need to send that to server it is as simple as doing

$http.post(url, $scope.job).then(func....

or pushing to another array

  $scope.allJobs.push($scope.job);
  $scope.job = {} // reset

Upvotes: 2

Related Questions