All geek questions in one place

How to get html form name in controller?

Here I have a hard-coded html form name (in a save function) in an angular controller. Instead, I want to get the name of the form in a variable and put it there. I mentioned similar questions , but could not 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;
            }
        }
    }
}());
+4
source share
3 answers

You can use the property $namelocated on the form object. To do this, you need to transfer vm.form.addNewDrugForm(ie form object) method to save and capture value $valid, and $namein the method.

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

the 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`
}
+3
source

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>
Run codeHide result
+3

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

Source: https://habr.com/ru/post/1680394/

More articles:


All Articles