Question

我有这种角度形式

  <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>
        ...
        ...

我想通过调用form点击a来手动提交submitNewPublishMessage()内部控制器msgForm.$valid, msgForm未定义。

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

Answer 1

我不知道离子，但我的猜测是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.$valid之外，还没有传递msgForm标志，因为它是多余的
不会将表单模型（即表单字段中输入的值）存储在NgFormController本身中。这样做会导致输入窗口小部件和输入模型之间发生冲突。

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

Answer 2

将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>

在angularJS中手动提交表单

2 个答案: