When utilizing AngularJS, my form is set up to pass data to a controller upon submission and then send 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>
As for 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 am encountering an error message that reads "cannot read property 'id' of undefined"
Is anyone able to identify what might be causing this issue? My understanding was that $scope.[NG-MODEL] retrieves the form data...