Запретить отправку формы при вводе ключа

Ответ 1

Так как у вас есть ng-click, вы также можете использовать <button type="button">, даже внутри тега формы. Поведение элемента кнопки по умолчанию - type="submit", что вы хотите предотвратить. Таким образом, никакой JavaScript не нужен вообще!

Ответ 2

Другие пользователи уже писали, что [button type = "submit" ] вызовет эту проблему. ОБРАТИТЕ ВНИМАНИЕ: кнопки БЕЗ КАЖДОГО типа = "..." декларация "submit" по умолчанию! Поэтому убедитесь, что вы всегда используете type = "button".

Ответ 3

Через пару часов этот странный код был единственным, что сработало.

Я жду лучших ответов, не приму этого монстра:

app.directive('onKeyup', function() {
    return function(scope, elm, attrs) {
      var allowedKeys = scope.$eval(attrs.keys);
      elm.bind('keydown', function(evt) {           
        angular.forEach(allowedKeys, function(key) {
          if (key == evt.which) {
             evt.preventDefault(); // Doesn't work at all
             window.stop(); // Works in all browsers but IE    
             document.execCommand("Stop"); // Works in IE
             return false; // Don't even know why it here. Does nothing.                     
          }
        });
      });
    };
});

и запустить его, используя это для всех входов формы:

<input on-keyup="bla" keys="[13]" .... />

Теперь, всякий раз, когда пользователь нажимает клавишу ввода, окно пытается отправить, а затем не делать этого, не так тихо. Уродливый, но он работает.

Изменить: keydown немного лучше, чем keyup для привязки элемента, теперь введите ключ fail silent-ish

Ответ 4

Если вы пытаетесь запретить отправку формы только на одном элементе, вы можете добавить следующий обработчик ng-keypress (это для Angular 1.x):

<input type="text" name="myField" ng-keypress="keyPressHandler($event)"/>

Со следующей реализацией для keyPressHandler:

$scope.keyPressHandler = function(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        e.stopPropagation();

        // Perform your custom logic here if any
    }
}

Ответ 5

У меня была аналогичная проблема, я закончил тем, что вытащил кнопку из формы. Видя, как я использую ng-click, и все привязано к ng-model, это не имеет большого значения, если оно внутри формы или нет.

Я понимаю, что это плохая практика, но, конечно, черт побери, написав специальную директиву, чтобы перехватывать нажатия клавиш.

Ответ 6

Отметьте this:

если форма имеет 2+ поля ввода и никаких кнопок или ввода [type = submit] то нажатие кнопки не запускает submit

Таким образом, если ваша форма имеет 2+ поля ввода, вы можете использовать что-то вроде <span ng-click="submit()">Sumbit</span>, чтобы предотвратить ввод ключа ключа в эти поля ввода.

Ответ 7

так просто, не нужно ничего делать. просто добавьте это в тег формы, если вы используете angular +2

<form (keydown.enter)="$event.preventDefault()" ...>

Ответ 8

Я столкнулся с этой проблемой. Да, вам нужно будет удалить весь тип = 'submit' со своей страницы и убедиться, что любые другие кнопки имеют тип = "button", но затем вызов все еще может использовать обычную отправку подтверждения.

Я создал директиву, которая запускает формы представления + состояния формы для проверки. Замена:

<button type="submit">

с

<button submit-button type="button">

Директива

export default /*@ngInject*/ function submitButton($log) {
return ({
    require: '^form',
    link: link,
    restrict: 'A'
});

function link(scope, element, attributes, formCtrl) {

    element.on('click', clickHandler);

    function clickHandler() {
        formCtrl.$setDirty(true);
        formCtrl.$setSubmitted(true);
        angular.element(element[0].form).triggerHandler('submit');
        $log.info('Form Submitted');
    }

}

Вы можете нажать ENTER для отправки, когда будете сфокусированы на своей кнопке отправки, лучше для UX и доступности, я думаю.

Ответ 9

Вы можете поймать форму отправки по умолчанию в своем контроллере, используя ng-submit в теге формы, и это предотвратит отправку:

http://docs.angularjs.org/api/ng.directive:ngSubmit

альтернативно, если вы действительно хотели поймать ключевые события, есть также директивы для тех, которые передают событие, которое вы можете вызвать stop:

http://docs.angularjs.org/api/ng.directive:ngKeyup

Ответ 10

Самое легкое решение, которое я нашел, это использовать тип ввода как кнопку вместо отправки и связать функцию отправки формы с помощью ng-click и не использовать ng-submit в теге формы.

Надеюсь, это поможет.

Ответ 11

Это мое странное, но быстрое и простое решение без каких-либо директив.

HTML:

  <form ng-submit='submitForm()'>
    <input type='text'>
    <button type='submit' ng-mousedown='doSubmit=true'>submit</button>
  </form>

Контроллер:

  $scope.submitForm = function() {
    if (!$scope.doSubmit) {
        return;
    }
    $scope.doSubmit = false;
    console.log('execute some actions');
  }

Ответ 12

angular.element(document).ready(function () {
    angular.element(window).keydown(function () {
        if(event.keyCode == 13) {
                  event.preventDefault();
                  return false;
        }
    });
});

Попробуйте с этим в контроллере angularjs

Ответ 13

Форма вводится при нажатии клавиши ввода, в то время как элемент управления в форме имеет фокус. Если вы зарегистрируете прослушиватель с помощью ng-submit, вы можете перехватить это и использовать запрет по умолчанию для остановки процесса по умолчанию (т.е. Отправки формы). Посмотрите на

Ответ 14

Следующее должно работать., , то есть форма отправляется только при нажатии кнопки, а не при нажатии Enter в полях ввода. (Это определенно работает для реактивных форм. Я не проверял это для шаблонных форм).

<form #form [formGroup]="form" METHOD="GET" action="http://localhost:3000/test">
  <input placeholder="Enter"/>
  <input placeholder="The Dragon"/>
  <button type="button" (click)="form.submit()">Submit</button>
</form>

Конечно, помните все импортные и декларации:

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
. . .
    FormsModule,
    ReactiveFormsModule

  ]
. . . 
})
export class AppModule { }

test.component.ts

import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
  form: FormGroup = new FormGroup({});
  constructor() { }

}

Ответ 15

Попробуйте установить переменную, когда вы нажимаете кнопку отправки и проверяете, что она была установлена ​​в форме submit.

$scope.click = function () {
    $scope.clicked = true;
    $scope.submit();
};

$scope.submit = function () {
    if ($scope.clicked) {
        ... submit
    } else {
        ... prevent defaults
    }
     $scope.clicked = false;
};

См. jsfiddle