angularjs Angular onsubmit for form

ds97pgxw  于 2023-06-28  发布在  Angular
关注(0)|答案(4)|浏览(135)

我需要表单上onsubmit属性的功能-即当我调用此onsubmit函数时,它必须返回truthy以便表单发布。然而,我想用一个angular函数调用来做到这一点,沿着所示:

<form id="form-submit-canvas" autocomplete="on" enctype="multipart/form-data" accept-charset="UTF-8" method="POST" onsubmit="{{FormSubmit.validate()}}" action="{{FormSubmit.SUBMIT_URL}}" novalidate>

然而,上面给出了关于在onsubmit上使用插值的错误。我尝试放入ng-submit,它不工作,因为我设置的action属性被覆盖。

bjg7j2ky

bjg7j2ky1#

不知道它是否对你仍然有效,但因为我一直在与类似的问题作斗争。
下面的答案把我带到了正确的轨道上:https://stackoverflow.com/a/17769240/1581069
所以,总结一下所需的步骤:
1.你应该在你的onsubmit中调用纯JavaScript(无Angular 的),像(请注意:如果返回false,则不会提交表单):

<form id="form-submit-canvas" ... name="fooForm" onsubmit="return externalValidate();" ...
  • 并实现该方法来切换到angular,如:
function externalValidate(){
  return angular.element($("#form-submit-canvas")).scope().validate();
}
  • 其中,validate()方法应该是前面提到的方法(在Angular 控制器中实现)。
  • externalValidate()应该在任何Angular 特定的组件之外实现。
  • 此外,请确保从validate()方法返回正确的结果(以防止表单提交)。可能是这样的:
$scope.validate = function () {
  // TODO implement whatever magic you need prior to submission

  return $scope.fooForm.$valid;
}
qnzebej0

qnzebej02#

尝试使用ng-submit属性而不是onsubmit。相关建议:Angular不支持许多属性。你应该找到ng-等价的属性,你想使用它来让Angular正确地对它们做出React。
示例:

<form id="form-submit-canvas" autocomplete="on" enctype="multipart/form-data" accept-charset="UTF-8" method="POST" ng-submit="validate()" novalidate>
    ...
    <input type="submit" name="submit" value="Submit" />
</form>

其中ng-submit中的validate()方法是在$scope上声明的方法。
下面是一个相关教程:AngularJS Tutorial ( ng-submit )

polhcujo

polhcujo3#

我知道这可以帮助一些人寻找如何在Angular中使用提交表单操作。我正在使用Angular 13,这是我们如何捕获提交操作:

<form [formGroup]="formData" (onSubmit)="onSubmit()">
    <button type="submit">Click here!</button>
</form>

参考资料在这里

myss37ts

myss37ts4#

return angular.element(this).scope().validate();“使用Angular 验证功能。

<form id="form-submit-canvas" autocomplete="on" enctype="multipart/form-data" accept-charset="UTF-8" method="POST" onsubmit="return angular.element(this).scope().validate();" >
    ...
    <input type="submit" name="submit" value="Submit" />
</form>

相关问题