AngularJs + Angular Material 表单提交两次答案

【问题标题】：AngularJs + Angular Material form is submitting twiceAngularJs + Angular Material 表单提交两次
【发布时间】：2017-07-03 12:30:21
【问题描述】：

我正在使用 AngularJs + Angular Material 创建一个注册表单。我遇到的麻烦是，当表单有效并提交时，它被提交了两次。我不知道为什么。

我没有两次声明控制器。控制器仅在路由提供程序中声明。我没有同时使用 ngSubmit 和 ngClick。

表单的HTML代码

        <form 
            ng-submit="registerForm.$valid && performRegister()" 
            name="registerForm" 
            novalidate>
            <md-input-container class="md-block">
                <label>Name</label>
                <input 
                    type="text" 
                    name="name" 
                    ng-model="register.user.name" 
                    required>
                <div ng-messages="registerForm.name.$error">
                    <div ng-message="required">Inserisci il tuo nome</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block">
                <label>Email</label>
                <input 
                    type="email" 
                    name="email" 
                    ng-model="register.user.email" 
                    ng-pattern="pattern.emailPattern" 
                    required>
                <div ng-messages="registerForm.email.$error">
                    <div ng-message="required">Inserisci la tua mail</div>
                    <div ng-message="pattern">Devi inserire una mail valida</div>
                </div>
            </md-input-container>
            <p>
                <md-button 
                    type="submit" 
                    class="button-block">Register</md-button>
            </p>
        </form>

控制器

SOS.controller("RegisterController", ["$scope", "$rootScope", "config", 
function($scope, $rootScope, config) {
    $scope.register = {
        user: {
            name: null,
            email: null, 
        }
    }
    $scope.pattern = {
        emailPattern: config.emailPattern
    }   
    $scope.performRegister = function(){    
        console.log($scope.register.user);
    }
}]);

每次我使用提交按钮提交表单时，performRegister() 函数都会被调用两次，并且我会在控制台中看到两次消息。如果我使用 Enter 键提交表单，则提交一次。知道为什么会这样吗？非常感谢。

【问题讨论】：

标签： angularjs forms form-submit

【解决方案1】：

我在我的应用程序中遇到了类似的问题。这就是我为解决它所做的。

我在 md 按钮中添加了 'ng-click="performRegister()"（以您的代码为例），并从 'form' 标记中删除了相同的功能。

所以最后看起来像：

<form 
        ng-submit="registerForm.$valid" 
        name="registerForm" 
        novalidate>
    ..
    ...
<md-button type="submit" ng-click="performRegister()"
                class="button-block">Register</md-button>

如果有帮助，请告诉我。

【讨论】：