在 angularJS 中手动提交表单

Question

我有这个angular表格

  <ion-nav-buttons side="right">
    <a class="button button-icon icon ion-android-done" href="#search/search-form" ng-click="submitNewPublishMessage(msgForm.$valid, msgForm)"></a>
  </ion-nav-buttons>
  <ion-content> 
      <form name="msgForm" class="css-form" novalidate>   
        <input type="text" name="title" ng-model="msgForm.title" ng-minlength="10" ng-maxlength="150" required>
        ...
        ...

我想在单击 a 时通过调用 submitNewPublishMessage() 手动提交 form 内部控制器两个 msgForm.$valid, msgForm 都未定义。

$scope.submitNewPublishMessage = function(isValid, form)
{
  alert(isValid);
  alert(JSON.stringify(form));
}

Answer 1

将 ng-click 事件放入表单中

    <form name="msgForm" class="css-form" novalidate>
         <ion-nav-buttons side="right">
        <a class="button button-icon icon ion-android-done" href="#search/search-form" ng-click="submitNewPublishMessage(msgForm.$valid, msgForm)"></a>
      </ion-nav-buttons>
      <ion-content> 

            <input type="text" name="title" ng-model="msgForm.title" ng-minlength="10" ng-maxlength="150" required>
            ...
            ...
</form>

Answer 2

我不知道 ionic，但我的猜测是 ionContent 指令有它自己的范围，因此表单是在这个内部范围而不是控制器的范围内创建的。

一如既往，诀窍是避免将事物直接存储在作用域中，而是将它们存储为作用域对象的属性。

因此，在控制器中，添加以下代码行：

$scope.forms = {
};

$scope.model = {
};

并在视图中使用

<ion-nav-buttons side="right">
  <a class="button button-icon icon ion-android-done" href="" ng-click="submitNewPublishMessage(forms.msgForm)"></a>
</ion-nav-buttons>
<ion-content> 
  <form name="forms.msgForm" class="css-form" novalidate>   
    <input type="text" name="title" ng-model="model.title" ng-minlength="10" ng-maxlength="150" required>

注意以上

除了 msgForm 之外不传递 msgForm.$valid 标志，因为它是多余的
不在 NgFormController 本身中存储表单的模型（即在表单字段中输入的值）。这样做会导致输入小部件和输入模型之间发生冲突。

如果我是你，我真的会非常非常避免使用链接来提交表单。链接用于导航，而不是用于表单提交。使用按钮。

在 angularJS 中手动提交表单

Submit form manually in angularJS

angularjs

angularjs-controller