Question

我有一个表格被移入表格，因为我无法使用ng-submit而失去内置表单验证功能：

<tr ng-form="controller.add.form">
  <td>New item</td>
  <td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
  <td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
  <td><button class="btn btn-xs btn-primary" type="submit" ng-click="controller.add.save()">Save</button></td>
</tr>

这就是我的控制器的样子：

.controller('ObjectController', ['ObjectService', function(ObjectService)
{
  var objects = this;
  objects.entries = [];
  objects.add = {
    name: '',
    description: '',
    save: function()
    {
      if(!objects.add.form.$valid) return;
      ObjectService.create(
        {name: objects.add.name, description: objects.add.description},
        function(r)
        {
          if(r && 'name' in r)
          {
            objects.add.name = '';
            objects.add.description = '';
            objects.entries.push(r);
          }
        }
      );
    }
  };
  ObjectService.read({}, function(r) { objects.entries = r; });
}])

单击时如何使用标准弹出窗口进行save方法触发验证？

Answer 1

来自AngularJS API参考：

ngForm的目的是对控件进行分组，但不是a 替换<form>标记及其所有功能（例如发布到服务器，...）。

ngForm允许在主要父表单中创建“表单组”，以允许单独验证组中的字段。因此，如果您不需要按组进行验证，则应使用<form>包围ng-form，甚至丢失ng-form。

Answer 2

您需要将表单传递给点击处理程序。

假设您的表单名称为＆＃34; myForm＆＃34;，请将ng-click更改为：

ng-click="controller.add.save($event, myForm)"

在你的控制器中：

    save : function(event, form) {
            if (form.$invalid) {
                console.log('invalid');
            } else {
                console.log('valid');
            }
        }

刚刚注意到你关于不使用表单元素的评论 - 正如Yaniv所说，只是用表单元素围绕表格：

<form name="myForm" novalidate>
    <table>
        <tr ng-form>
            <td>New item</td>
            <td>
                <input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name">
            </td>
            <td>
                <textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea>
            </td>
            <td>
                <button class="btn btn-xs btn-primary" type="submit" ng-click="controller.add.save($event, myForm)">Save</button>
            </td>
        </tr>
    </table>
</form>

演示 http://plnkr.co/edit/qKFs3q?p=preview

从单击处理程序触发角度形式验证

2 个答案: