2

入力が必要な単純なフォームを次に示します。

<div ng-controller="MainCtrl">
    <form name="add-entry" press-enter="add_entry()">
        <input type="text" ng-model="amount" required />
        <!-- <input type="submit" value="Add" /> -->
    </form>
</div>

フォームはカスタムの pressEnter ディレクティブを使用します。これ<input type="submit" />は、マークアップで を使用することに消極的であるためです。たとえ絶対位置などで非表示にできたとしても (ngSubmit代わりに を使用pressEnterすると、式を起動するためにこれらのいずれかが必要になります)。

angular.module('app', []).directive('pressEnter', function() {
  return function(scope, element, attrs) {
    element.bind("keydown keypress", function(event) {
      if(event.which === 13) {
        scope.$apply(function(){
          scope.$eval(attrs.pressEnter);
        });
        event.preventDefault();
      }
    });
  };
});

ここでの問題は、 がないとrequired属性も考慮されないことngSubmitです。http://jsfiddle.net/w6QHD/12/を参照してください。空の入力で Enter キーを押すと、引き続き起動することがわかりますadd_entry()。ngSubmitの代わりにを使用しpressEnter、コメントを外した場合にのみ、フォームが検証され<input type="submit">ます。

を使用せずにフォーム検証を機能させるにはどうすればよいngSubmitですか?

4

1 に答える 1

3

HTML5 検証に依存するか、AngularJS 検証に依存するかは明確ではありません。使用したいのが Angular 検証である場合は、単純にFormControllerを使用して検証とエラー メッセージをトリガーすることができます。

<div ng-controller="MainCtrl">
  <form name="form" press-enter="add_entry()" novalidate>
    <input type="text" name="amount" ng-model="amount" required />
    <span ng-show="submitted && form.amount.$error.required">Amount is required</span>
  </form>
</div>

function MainCtrl($scope) {
    $scope.add_entry = function() {
        $scope.submitted = true;
        if($scope.form.$valid){
            console.log("Entry added");
        }
    }
};

フィドル

于 2013-07-12T11:51:19.140 に答える