2017-07-03 6 views
1

AngularJs + Angular Materialを使用して登録フォームを作成しています。問題があるのは、フォームが有効で提出されると、フォームが2回提出されるということです。なぜ私は理解できません。AngularJs + Angular Materialフォームが2回提出されています

コントローラを2回宣言していません。コントローラはルートプロバイダでのみ宣言されます。 私は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); 
    } 
}]); 

毎回iは、送信ボタンを使用してフォームを送信、performRegister()関数が2回呼び出され、iはコンソールにメッセージが表示さ二度。 Enterキーを使用してフォームを送信すると、一度送信されます。 これはなぜ起こっているのでしょうか? ありがとうございます。

答えて

0

私のアプリケーションでも同様の問題がありました。これは私がそれを解決するためにしたものです。

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> 

関連する問題