2017-06-29 9 views
4

ここでは、角度コントローラのハード・コード化されたHTMLフォーム名(保存機能内)を持っています。その代わりに、フォーム名を変数に入れてそこに入れたいと思っています。私は同様のquestionsを参照しましたが、解決策を見つけることができませんでした。htmlフォームの名前をコントローラに取得する方法は?

HTMLフォーム

<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> 

角度コントローラ

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

答えて

3

この方法を試すことができse $nameプロパティがフォームオブジェクトに配置されています。あなたのためにメソッド&グラブ$valid & $nameプロパティの値を保存するvm.form.addNewDrugForm(つまりフォームオブジェクト)を渡す必要があります。

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

コード

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

あなたはU

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>

+1

ニース試みるが、これは、あなたが複数のフォームを持っている場合はめちゃめちゃになります:/コントローラからDOMを照会すると、次にアンチパターン –

+1

ですが、彼はあなたの答えが正しいフォーム名 –

+1

を渡す必要があるのと同じように 'index'を使ってそれを取得します。とにかく、フォームの正当性を渡していました'' ng-submit = "vm.save(vm.form.addNewDrugForm。$ valid)" '私は彼に' 'ng-submit =" vm.save(vm.form.addNewDrugForm) "を実行するように提案しました。私が思うどんな問題でもあります.. –

0

これは

<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; 
     } 
関連する問題