toxic toxic - 8 months ago 33
AngularJS Question

AngularJS ng-submit function is not working in ASP.NET Core 1.0

I have ASP.NET MVC application and I am trying simple example where submit form is handle by ng-submit and alert value of input using angularJS. my first part of angularJS (display record in table ng-repeat) is working but not form

What I want is alert called

vm.addTrip() = function () {
alert(vm.newTrip.name);
};


when I press submit button on form

<form novalidate name="NewTripForm" ng-submit="vm.addTrip()"></form>


I am getting following error; (from console....)

TypeError: vm.addTrip is not a function
at new tripsController (tripsController.js:31)
at Object.invoke (angular.js:4862)
at R.instance (angular.js:10717)
at n (angular.js:9594)
at g (angular.js:8903)
at g (angular.js:8906)
at g (angular.js:8906)
at angular.js:8768
at angular.js:1847
at m.$eval (angular.js:18017)


https://jsfiddle.net/toxic_kz/srs69ppp/2/

HTML






<div>{{ "Two plus Two equals: " + (2+2) }}</div>

<div ng-controller="tripsControllers as vm" class="col-md-6 col-md-offset-3" style="width:100%">
<table class="table table-responsive table-striped">
<tr ng-repeat="trip in vm.trips">
<td>{{ trip.name }}</td>
<td>{{ trip.created | date: 'dd-MM-yyyy'}}</td>
<td><a href="#" class="btn btn-sm btn-primary">Manage</a></td>
</tr>
</table>

<form novalidate name="NewTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">New Trip Name</label>
<input class="form-control" type="text" id="name" name="name" ng-model="vm.newTrip.name" />
</div>

<div class="form-group">
<label>Testing Button</label>
<input class="btn btn-success" type="button" value="testing" id="testA" ng-click="alert('testing A Button')" />
</div>

<div class="form-group">
<input class="btn btn-success btn-sm" type="submit" value="Add" />
</div>
</form>


</div>




AngularJS



(function () {
"use strict";

angular.module("app-trips", []);
})();

(function () {
"use strict";

angular.module("app-trips")
.controller("tripsControllers", tripsController);

function tripsController()
{
var vm = this;

vm.trips = [{
name: "US trip",
created: new Date()
},
{
name: "World trip",
created: new Date()
}
];

vm.newTrip = {};

vm.addTrip() = function () {
alert(vm.newTrip.name);
};

}

})();

Answer Source

Remove the extra parenthesis:

vm.addTrip() = function () {
        alert(vm.newTrip.name); 
    };

should be

vm.addTrip = function () {
        alert(vm.newTrip.name); 
    };