angularjs.net-core-rc2ng-submit

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); 
    };

  }

})();

Solution

  • Remove the extra parenthesis:

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

    should be

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