AngularJS Cannot get form data

Question

Pulling values from a form in AngularJS doesn't appear to be working - for example my form code is:

<form ng-submit="newCompany()">
    <div class="form-group">
        <label>Name</label><input type="text" name="company_name" id="company_name" tabindex="2" ng-model="newCompany.company_name" class="form-control">
        <label>Primary Contact</label><input type="text" name="primary_contact" id="primary_contact" tabindex="2" ng-model="newCompany.primary_contact" class="form-control">
        <label>Address</label><input type="text" name="address" id="address" tabindex="2" ng-model="newCompany.address" class="form-control">
        <label>Function</label><input type="text" name="function" id="function" tabindex="2" ng-model="newCompany.function" class="form-control">
        <label>Telephone</label><input type="text" name="telephone" id="telephone" tabindex="2" ng-model="newCompany.phone" class="form-control">
        <label>Fax</label><input type="text" name="fax" id="fax" tabindex="2" ng-model="newCompany.fax" class="form-control">
        <label>URL</label></label><input type="text" name="url" id="url" tabindex="2" ng-model="newCompany.url" class="form-control">
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <input type="submit" name="add-submit" id="add-submit" tabindex="10" class="form-control btn btn-primary" value="Add Company">
                <br>
                <div class="text-center">
                    <p ng-show="addCompany"><span class="label label-info">{{ addCompany }}</span></p>
                </div>
            </div>
        </div>
    </div>
</form>

But in the controller, doing newCompany.name or $scope.newCompany.name, doesn't work. It returns nothing and says newCompany is undefined.

Controller:

app.controller("CompaniesController", ['$scope', 'Companies', function($scope, Companies) {
    $scope.title = 'Companies';
    $scope.title_sub = 'Add Company';

   $scope.companyData = {
       company_name: newCompany.company_name,
       primary_contact: newCompany.primary_contact,
       address: newCompany.address,
       function: newCompany.function,
       telephone: newCompany.phone,
       fax: newCompany.fax,
       url: newCompany.url
   };

    $scope.addCompany = function() {
        var company = new Companies($scope.companyData);
        company.$save();
    };

    $scope.companies = Companies.query();
}]);

Can anybody see what is wrong or how to get it to work?

You said, when the form is submitted call the function newCompany(). I don't see that function. — takendarkk
– takendarkk, Commented Nov 19, 2015 at 12:54
You try to call newCompany() which is not defined. Your model is newCompany... so which it is, object or a function? also you try to use ng-show="addCompany" but addCompany is a function. Maybe you should re-read & debug your code just once more... — Mikko Viitala
– Mikko Viitala, Commented Nov 19, 2015 at 12:57
stackoverflow.com/questions/33802005/… It is you again. Try to finish all the steps I suggested there, then if it is still not working post here. — Ágoston Székely
– Ágoston Székely, Commented Nov 19, 2015 at 13:03

Shailendra Sharma · Accepted Answer · 2015-11-19 12:59:17Z

0

Yes newCompany is undefined please define it before use will solve your problem

 $scope.newCompany = {};

   $scope.companyData = {
       company_name: newCompany.company_name,
       primary_contact: newCompany.primary_contact,
       address: newCompany.address,
       function: newCompany.function,
       telephone: newCompany.phone,
       fax: newCompany.fax,
       url: newCompany.url
   };

and also you don't need to use $scope.companyData just use newCompany inside your save function

$scope.addCompany = function() {
        var company = new Companies($scope.newCompany);
        company.$save();
    };

if you see in console using console.log(newCompany) after submit data it already there with key value pair as you trying to create with your $scope.companyData

edited Nov 19, 2015 at 12:59

answered Nov 19, 2015 at 12:54

Shailendra Sharma

6,9922 gold badges30 silver badges48 bronze badges

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

2 Comments

JWDev Over a year ago

I've just done that and it still claims it is undefined. $scope.newCompany = {}; $scope.companyData = { company_name: newCompany.company_name, primary_contact: newCompany.primary_contact, address: newCompany.address, function: newCompany.function, telephone: newCompany.phone, fax: newCompany.fax, url: newCompany.url };

Shailendra Sharma Over a year ago

please add more code in your question or better create a fiddle will help us

Collectives™ on Stack Overflow

AngularJS Cannot get form data

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related