0

我有一个表格被移到表格中，失去了内置的表格验证功能，因为我不能使用 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; });
}])

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

4

2 回答 2

0

来自 AngularJS API 参考：

<form>ngForm 的目的是对控件进行分组，但不是用它的所有功能（例如发布到服务器，...）来替代标签。

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

于 2015-12-23T23:06:29.010 回答
0

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

假设您的表单名称为“myForm”，请将 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

于 2015-12-23T23:39:50.873 回答