Javascript submit не работает

Question

Это похоже на очень простой вопрос, но по какой-либо причине мой метод submit() не вызывается в JS.

HTML:

<ion-view title="Register" hide-nav-bar="true" nav-transition="none" id="page9"> 
    <ion-content padding="true" class="manual-ios-statusbar-padding" scroll="false"> 
     <form id="register-form4" ng-submit="register()" class="list"> 
      <ion-list id="register-list4"> 
       <label class="item item-input" id="register-input7"> 
        <input type="text" ng-model="registration.email" placeholder="Email" required> 
       </label> 
       <label class="item item-input" id="register-input9"> 
        <input type="password" ng-model="registration.password" placeholder="Password" required> 
       </label> 
      </ion-list> 
     </form> 
     <a id="register-button7" ng-click="document.getElementById('register-form4').submit();" class="button button-positive button-block">Create Account</a> 
     <a ui-sref="login" id="register-button8" class="button button-positive button-block button-clear">Back</a> 
     <div ng-show="isError">{{ loginError }}</div> 
    </ion-content> 
</ion-view> 

Контроллер:

.controller('registerCtrl', ['$scope', '$stateParams', "$firebaseAuth", "$location", 
function ($scope, $stateParams, $firebaseAuth, $location) { 
    $scope.register = function() { 
    var email = $scope.registration.email, 
     password = $scope.registration.password, 
     confirmPassword = $scope.registration.confirmPassword; 

     console.log("Being submitted"); 
    } 
}]) 

я не могу изменить <a> тег, даже если это было бы проще просто иметь форму представить input но HTML является авто -генерированный Ионным Творцом, и я не могу испортить его.

EDIT: Поэтому я хочу, чтобы отправить форму таким образом, а не просто вызвать register() по нажатию кнопки, что я хочу, чтобы вызвать HTML required «s в форме, так что проверяет поля были поэтому мне не нужно это делать вручную

EDIT 2: Я изменил тег <a> на кнопку отправки. Однако, это еще не вызывая register() метод, который предполагает форму не представляется:

<input type="submit" value="Create Account" id="register-button7" class="button button-positive button-block"> 

Глядя на этих docs, он должен работать, как это в значительной степени тот же формат

Я прочитал, что 1 пользовательские вещи, которые стандартные HTML submit и ng-submit не работают вместе. Кто-нибудь знает, верно ли это?

Answer 1

Вы можете использовать html input типа submit или button внутри вашей формы. Вот рабочая демонстрация в JSFiddle: https://jsfiddle.net/ydbhb5dL/

Контроллер:

angular 
    .module('App', []) 
    .controller('ExampleController', function ($scope) { 
     $scope.registration = {}; 

     $scope.register = function() { 
      var email = $scope.registration.email, 
       password = $scope.registration.password; 

      console.log('Email:', email); 
      console.log('Password:', password); 
      console.log('Being submitted!'); 
     }; 
    }); 

Html:

<div ng-app="App" ng-controller="ExampleController"> 
<ion-view title="Register" hide-nav-bar="true" nav-transition="none" id="page9"> 
    <ion-content padding="true" class="manual-ios-statusbar-padding" scroll="false"> 
    <form id="register-form4" ng-submit="register()" class="list"> 
     <ion-list id="register-list4"> 
     <label class="item item-input" id="register-input7"> 
      <input type="text" ng-model="registration.email" placeholder="Email" required> 
     </label> 
     <label class="item item-input" id="register-input9"> 
      <input type="password" ng-model="registration.password" placeholder="Password" required> 
     </label> 
     </ion-list> 

     <input type="submit" class="button-like-link" value="Create Account (button)"> 
    </form> 
    </ion-content> 
</ion-view> 
</div> 

Answer 2

Чтобы решить вашу проблему изменения <a> элемент, который отправляет форму в

<a id="register-button7" ng-click="register()" class="button button-positive button-block">Create Account</a> 

Причина: ngClick не работает но это потому, что он смотрел на $scope для document, который не определен. Вы можете добавить следующую строку к контроллеру, но это необязательно.

$scope.document = document; 

Если вы настаиваете на не меняя форму структуры, вы можете создать новую директиву для вашей «кнопки» отправить аналогичную приведенную ниже (непроверенный).

angular.module('moduleName').directive('submitForm', function() { 
    return { 
     restrict: 'A', 
     scope:  { 
      formId: '=' 
     }, 
     link:  function($scope, $elem) { 
      $elem.on('click', function() { 
       document.getElementById($scope.formId).submit(); 
      }); 
     } 
    }; 
}); 

Какой бы вы затем использовать следующим образом:

<a id="register-button7" submit-form form-id="register-form4" class="button button-positive button-block">Create Account</a> 

Если вы все еще не хотите, чтобы изменить <a> тег использовать новую директиву, ваш единственный другой вариант определения $scope.document = document.

Или, как указано в @J Orbe, вы можете использовать onclick вместо того, чтобы полагаться на Угловую директиву (то есть ngClick и submitForm). Я не уверен, что это относится к ТМ «Угловой путь», и вы можете избежать смешивания угловых и обычных атрибутов JavaScript, так как это может привести к путанице. Как правило, если вы используете Angular, вы должны попытаться решить все, используя Angular.