Question

我有一个简单的表单需要submit点击按钮并隐藏ng-click的内容，当我没有为隐藏内容添加ng-click时，它会提交表单，当我添加ng-click时，表单不提交：

表格头：

 <form class="form" name="form" ng-submit="edit(form)" novalidate ng-show="editorEnabledView">

按钮：

<button analytics-on analytics-event="Bouton Terminer" analytics-category="Profil" ng-click="disableEdditing()" class="btn btn-lg btn-primary" type="submit">{{ step == 2 ? 'Terminer' : 'Enregistrer' }}</button>

CTRL

$scope.editorEnabledView = false;

                $scope.showEdditing = function () {
                    $scope.editorEnabledView = true;
                    console.log("YES TRUE");
                }

                $scope.disableEdditing = function () {
                    $scope.editorEnabledView = false;
                }

我的编辑功能：

$scope.edit = function (form) {
        if (!form.$valid) return;

        $scope.errors = {};
        if (!$scope.address.input) $scope.errors.address = 'Votre adresse de travail est obligatoire.';

        var data = {
            gender: $scope.user.gender,
            name: {
                first: $scope.user.name.first,
                last: $scope.user.name.last
            },
            phone: $scope.user.phone,
            job: {
                name: $scope.user.job.name,
                status: $scope.user.job.status
            },
            about: $scope.user.about,
            interests: $scope.user.interests
        };

        getAddress(function (response) {
            data.address = {
                full: response.formatted_address,
                city: getCity(response.address_components),
                latitude: response.geometry.location.lat(),
                longitude: response.geometry.location.lng(),
                timestamp: new Date()
            };

            User.update(data, function (user) {
                submit = true;
                Auth.update(user);
                if ($scope.step == 1) return $scope.step++;
                $location.path($scope.step == 2 ? '/' : '/users/view/' + user._id);
            }, function (err) {
                Auth.update(originalUser);
                $scope.user = originalUser;

                angular.forEach(err.data.errors, function (error, field) {
                    $scope.errors[field] = error.message;
                });
            });
        });
        //$scope.editorEnabledView = false;
    };

我发现当转到另一个页面并回到用户配置文件时，我看到表单已提交!!但我希望在提交后看到它

Answer 1

我必须改变我的答案，因为现在很清楚，你要做的就是在提交后隐藏你的表格。这可以通过使用form.$submitted和ng-hide

来完成

<div ng-controller="MyCtrl">
<form class="form" name="form" ng-submit="edit(form)" ng-hide="form.$submitted" ng-show="!form.$submitted" novalidate >
</div>

<button analytics-on analytics-event="Bouton Terminer" analytics-category="Profil"  class="btn btn-lg btn-primary" type="submit">{{ step == 2 ? 'Terminer' : 'Enregistrer' }}</button>

Answer 2

我做了一个片段，一切似乎都在运作......我认为你做错了什么。也许你错过了表单标签中的ng-submit。请参阅我的代码段并更改您的代码。

var $scope = {};

var myApp = angular.module('myApp', []);

myApp.controller('ngSubmitCtrl', ['$scope', function($scope){
  
  $scope.editorEnabledView = true;
  
  $scope.showEdditing = function () {
      $scope.editorEnabledView = true;
      alert("showEdditing");
  }
  
  $scope.disableEdditing = function () {
      $scope.editorEnabledView = false;
    alert("disableEdditing");
  }
  
  $scope.edit = function (form) {
    alert("submitForm");
  }
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='myApp' ng-controller="ngSubmitCtrl">
  <form class="form" name="form" ng-submit="edit(form)" novalidate ng-show="editorEnabledView">
    <button 
            analytics-on analytics-event="Bouton Terminer" 
            analytics-category="Profil" 
            ng-click="disableEdditing()" 
            class="btn btn-lg btn-primary" 
            type="submit">{{ step == 2 ? 'Terminer' : 'Enregistrer' }}
    </button>
  </form>
</div>

Answer 3

为什么要在form电话内发送edit？

<form class="form" name="form" ng-submit="edit()">
  <input type="text" ng-model="formData.name">
</form>

控制器中的

$scope.edit = function() {
   console.log($scope.formData)
}

或者如果你想用参数意味着调用编辑功能

<form class="form" name="form" ng-submit="edit(form)">
  <input type="text" ng-model="form.name">
</form>

控制器中的

$scope.edit = function(data) {
   console.log(data)
}

这应该有效。但是我们没有解决你的问题。如果您显示完整代码，我们会提供帮助。

使用ng-click时，表单不会提交

3 个答案: