CODEWITHSUNDEEP
javascriptangularjshtmlforms
Isuru
Isuru

Reputation: 129

How to get html form name into controller?

Here, I have hard coded html form name(in the save function) in angular controller. Instead of that I want to get form name into a variable and put it in there. I referred to similar questions, but couldn't find a solution.

HTML form

<section xmlns="http://www.w3.org/1999/html">
  <div class="page-header">
    <h1>{{vm.drug._id ? 'Edit Drug Information' : 'Add New Drug'}}</h1>
  </div>
  <div class="col-md-12">
    <form name="vm.form.addNewDrugForm" class="form-horizontal" ng-submit="vm.save(vm.form.addNewDrugForm.$valid)"
          novalidate>

    </form>
  </div>
</section>

Angular Controller

(function () {
    'use strict';

    // Drugs controller
    angular
        .module('drugs')
        .controller('DrugsController', DrugsController);

    DrugsController.$inject = ['$scope', '$state', '$window', 'Authentication', 'drugResolve'];

    function DrugsController($scope, $state, $window, Authentication, drug) {
        var vm = this;

        vm.authentication = Authentication;
        vm.drug = drug;
        vm.error = null;
        vm.form = {};
        vm.remove = remove;
        vm.save = save;
        vm.printDrug = printDrug;

        // Save Drug
        function save(isValid) {
            if (!isValid) {
                $scope.$broadcast('show-errors-check-validity', 'vm.form.addNewDrugForm');
                return false;
            }

            // TODO: move create/update logic to service
            if (vm.drug._id) {
                vm.drug.$update(successCallback, errorCallback);
            } else {
                vm.drug.$save(successCallback, errorCallback);
            }

            function successCallback(res) {
                $state.go('drugs.view', {
                    drugId: res._id
                });
            }

            function errorCallback(res) {
                vm.error = res.data.message;
            }
        }
    }
}());

Upvotes: 4

Views: 650

Answers (3)

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

try this way

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope, $element){
   alert($element.find('form').attr('name'));
   $scope.myFormName = $element.find('form').attr('name');
});
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>Select Example - AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
      <div class="col-md-12">
    <form name="vm.form.addNewDrugForm" class="form-horizontal" ng-submit="vm.save(vm.form.addNewDrugForm.$valid)"
          novalidate>
{{myFormName }}
    </form>
  </div>
</section>
</body>
</html>

Upvotes: 3

MuruGan
MuruGan

Reputation: 1420

try this 

<form name="vm.form.addNewDrugForm" class="form-horizontal" ng-submit="vm.save(vm.form.addNewDrugForm.$valid,vm.form.addNewDrugForm)"
      novalidate>
</form>
function save(isValid,formaname) {
console.log (formname)
        if (!isValid) {
            $scope.$broadcast('show-errors-check-validity', 'vm.form.addNewDrugForm');
            return false;
        }

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You could use $name property situated on form object. For the you have to pass vm.form.addNewDrugForm(i.e. form object) to save method & grab $valid & $name property values in the method.

ng-submit="vm.save(vm.form.addNewDrugForm)"

Code

function save(form) {
   console.log('name of form', form.$name); // prints `vm.form.addNewDrugForm`
   console.log('validity of form', form.$valid); //prints `true/false`
}

Upvotes: 3

Related Questions