1 
<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 表单，但是当我像上面那样做时，不会像对button所做的那样考虑“必需”语句。

当 textarea 为空时，第一个按钮无论如何都会运行 submit() 函数。是否可以具有与按钮相同的行为？

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

4

2 回答 2

3

我认为您应该使用 aninput而不是 a div，例如：

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

我已经在您的 jsFiddle 上对其进行了测试，并且效果很好。

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

更新

看起来您不能使用除 ainput或 a以外的任何东西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在这里。希望这会为您解决问题。

于 2014-09-14T02:20:59.820 回答
0

如果你想从一个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");
    };
于 2014-09-14T08:16:14.203 回答