Question

你可以在角度使用html进行表单validatin，但如果你在输入字段中点击<enter>键，表单将被提交，所有数据都是未定义的（忽略禁用按钮）。

如何在ng-submit="submitForm()"处理程序（它所属的位置）中进行表单验证。

编辑：所以每个人都告诉我enter触发提交按钮提交（因为它的禁用它应该有效） - 我不相信这是真的，但这是我的形式。对我而言，当我点击进入时它就会提交。

<form novalidate class="user" name="user" ng-show="showUserForm" ng-submit="joinChat()">
    <input type="text" placeholder="Enter nick" required ng-model="user.nick" tabindex="1" ng-minlength="2" ng-maxlength="10">
    <button ng-disabled="user.$invalid">Join</button>
</form>

以下是joinChat()的作用：

    $scope.joinChat = function(){
        $scope.showPostMessage = true;
        $scope.showUserForm = false;

        socket.emit('chat:join', { nick: $scope.user.nick });
    };

Answer 1

首先，请确保通过在表单上设置novalidate来关闭html5验证，并确保您的表单有一个名称。这样可以很容易地将表单控制器传递给提交处理程序：

<form novalidate name="myForm" ng-submit="submitForm(myForm)"></form>

然后在你的处理程序中你可以做你想做的事情：

$scope.submitForm = function(form){
    if(form.$invalid){
       alert("FORM INVALID");
    } 
    else{
        // do whatever you want to do on form submit.
    }
};

如果要进行其他验证，可以使用表单对象访问所有表单控件，读取其值并设置其有效状态。表单对象是一个formController，其api记录在这里：

http://docs.angularjs.org/api/ng.directive:form.FormController

您还可以访问每个控件。例如，如果您有如下输入：

<input type="text" name="myInput" ng-model="someValue" />

您可以从表单对象访问它，如下所示：

form.myInput;

然后您可以执行ngModelController中记录的任何内容：

http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

例如，您可以将输入设置为无效：

form.myInput.$setValidity('someCustomError', false);

您可以阅读当前值：

var currentValue = form.myInput.$viewValue;

等...

是否可以在提交处理程序中进行表单验证？

1 个答案: