獲取角表單驗證不使用ngSubmit

Question

這裏工作是一個簡單的形式輸入所需：

<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/ - 您可以看到，按輸入空輸入仍會觸發add_entry()。該表格僅在使用ngSubmit而不是pressEnter並取消註釋<input type="submit">時進行驗證。

如何在不使用ngSubmit的情況下進行表單驗證？

Answer 1

您是否想要依賴HTML5驗證或AngularJS驗證並不十分清楚。 如果這是您要使用比你可以簡單地使用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"); 
     } 
    } 
}; 

FIDDLE