AngularJS Form data is not defined

Question

In AngularJS, I have a form, that when submitted, passes data off to a controller and sends it to an API.

Form:

 <form ng-submit="newCompany()">
            <div class="form-group" ng-controller="CompaniesController">
                <label>ID</label><input type="text" name="id" id="id" ng-model="newCompany.id" tabindex="1" class="form-control">
                <label>Name</label><input type="text" name="name" id="name" tabindex="2" ng-model="newCompany.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>

And the controller...

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

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

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

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

However - I get an error that says "cannot read property 'id' of undefined"

Does anybody know what is wrong here? I thought $scope.[NG-MODEL] gets the form data...

Partha Sarathi Ghosh · Accepted Answer · 2015-11-19 11:23:22Z

1

You have a $scope.newCompany variable which is a function, not an object.
When you initialize $scope.companyData, you call id: $scope.newCompany.id, where $scope.newCompany is undefined. Try define it first with all its properties ($scope.newCompany = { id : "", ... })
Call your submit function something else.
Do not create a function whose name itself a 'function'. (function: $scope.newCompany.function). This is reserved as a keyword.

These steps may be close to the result you want to see, if not reply back.

edited Nov 19, 2015 at 11:23

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

answered Nov 19, 2015 at 11:16

Ágoston Székely

2421 silver badge10 bronze badges

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

2 Comments

JWDev Over a year ago

After defining the properties first... I now get this error as soon as I type into the 'name' field: TypeError: Cannot assign to read only property 'name' of function () { var company = new Companies($scope.companyData); company.$save(); }

Ágoston Székely Over a year ago

Did you rename your ng-submit function? angular tries to change to property of that function, which obviously does not exist.

Collectives™ on Stack Overflow

AngularJS Form data is not defined

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