Question

<div ng-app>
  <div ng-controller="Ctrl">
     <form ng-submit="submit() ">
       <textarea ng-model="text" required></textarea>

       <div  ng-click="submit()" style="background-color:#ff00ff;cursor:pointer;width:100px;">Create !</div>

       <button type="submit" style="background-color:#ff00ff;cursor:pointer;width:100px;">Create !</button>

    </form>
    {{list}}
  </div>
</div>

我想提交一个带有自定义 div 按钮的Angular表单，但是当我像上面那样执行时，＆＃34; required＆＃34;语句不会像按钮那样被考虑在内。

当textarea为空时，第一个按钮仍会运行submit（）函数。是否可以与按钮具有相同的行为？

这是一个说明这个的JsFiddle： http://jsfiddle.net/xKkvj/55/

Answer 1

我认为你应该使用input而不是div，例如：

<input type="submit" ng-click="submit()" style="background-color:#ff00ff;cursor:pointer;width:100px;">Create !</input>

我已经在你的jsFiddle上测试了它，它运行正常。

如果您真的必须使用<div>，请使用它来包装<input>

<强>更新

看起来您不能使用input或button以外的任何内容，因为ngForm会监听表单提交。您可以扩展ngForm，也可以使用隐藏按钮并从您的div中触发，如下所示：

<div onClick="document.getElementById('hiddenButton').click();" style="background-color:#0000ff;cursor:pointer;width:100px;">Create !</div>
<button id='hiddenButton' type="submit" style="display:none;">Create !</button>

jsFiddle here。希望这会为你做到这一点。

Answer 2

如果您想从div元素提交表单，那么您应该手动测试表单在submit处理程序中是否有效：

function sumbit() {
if (form.$invalid) {
return;
}
// Other code...
}

关键是，当您通过<input type="submit"/>提交表单时，表单验证检查会在内部执行。如果表单无效，则不会调用表单处理程序。

<强>更新

您的jsfiddle表单处理程序应如下所示：

$scope.submit = function () {
        if ($scope.submitCreateSurveyForm.$invalid) {
            return;
        }
        if ($scope.text) {
            $scope.list.push($scope.text);
            $scope.text = '';
        }
        console.log("sent");
    };

AngularJS：不需要使用ng-click提交的必填表单字段

2 个答案: