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

我有一个表单被移动到表中，由于无法使用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>

---

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

来自AngularJS API参考：

ngForm的目的是对控件进行分组，而不是作为 用标签的所有功能（例如。 发布到服务器，…）

---

ngForm允许在主父表单中创建“表单组”，允许单独验证组中的字段。因此，您应该用

包围ng表单，如果不需要分组验证，甚至可以丢失ng表单

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

假设您的表单名称为“myForm”，请将ng单击更改为：

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.POST保存提交？save方法调用service@MortenNilsen你能发布控制器代码吗？如果我调用$setSubmitted（），请在@Artem中检查答案，不会出现弹出窗口，但是我能够正确地读取$valid。由于它是一个表行，我不能用表单包围它-由于它是无效的html，表单根本不工作。也许你可以用

包围整个表，或者使用模拟表标记布局的CSS:

display:table

，

display:table row

，和

显示：表格单元格

。为了使用本机验证和ng submit，您现在可以使用

标记。这是一个已知的问题：在没有表格的情况下列出表格数据对我来说似乎不是一个开始。同样，将整个表格变成一个单一的表格也是不正确的。我想我将不得不放弃表单验证反馈。我担心在表中放置表单，因为表包含用于按需编辑行的隐藏输入元素。这是我的第一个angular应用程序，所以在我不知道的情况下，我的担心可能被放错了位置。如果没有看到你的整个应用程序，我认为这样做不会有任何问题。作为替代方案，您可以尝试将每个输入传递到save函数（即controller.add.save（$event，name，description））并检查每个元素的角度属性，如name.$invalid。我以前没有从控制器尝试过，但怀疑它应该可以工作。

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