时间戳

首页 > 解决方案 > 如何在表格中设置 AngularJS 表单验证

angularjs - 如何在表格中设置 AngularJS 表单验证

问题描述

我有一个包含一些字段的表，我想将该表提交到数据库，但我希望它们被验证为必需，因此我将表放入一个表单并尝试验证它们

要验证的表格（仅需要）：

<form id="trip-send-form">

    <!--some field , this field is validated to be required successfully-->
    <input type="text" 

    <!--but the fields here, are not being set to be required-->
    <table>
        <tbody ng-repeat="item in items">
            <tr>

                <td><input type="checkbox" ng-model="item.setRequired"</td>
                <td><input type="text" ng-model="name" ng-required="item.setRequired" /></td>

            </tr>
        </tbody>
    </table>

    <input type="submit"/>

</form>

控制器：

$('#send-trip-form').validator({
    focus: false,
    feedback: {
       success: 'fa fa-ok',
       error: 'fa fa-remove'
    }
})
$('#send-trip-form').validator().on('submit', function(e) {
    if (e.isDefaultPrevented()) {
        console.log( "error" );
    } else {
        console.log( "success" );
    }
})

我正在等待你的友好回应。

谢谢。

标签： angularjs

解决方案

不需要jQuery来使用表单验证，你可以在这里学到很多关于angularjs表单验证的知识

这是一个小提琴

您可以看到所需的第一个输入：

<input type="text" ng-model="myModel" required />

在您可以看到在控制器中初始化的项目列表以及动态完成的验证：

<tr ng-repeat="item in items">
    <td><input type="checkbox" ng-model="item.setRequired"</td>
    <td><input type="text" ng-model="name" ng-required="item.setRequired" /></td>
</tr>

控制器初始化：

$scope.items =[
    {setRequired: false},
    {setRequired: true}
];

然后是使用表单验证器的提交按钮：

<input type="submit" ng-disabled="myForm.$invalid"/>

myForm 是form( <form id="trip-send-form" name="myForm" ng-submit="submitted()">) 的名称，它是使用验证器所必需的。

该函数submitted()将在提交时调用，它也是在控制器中定义的函数。

jQuery 和 Angularjs 是两个不同的东西，在使用 angularjs 时，你应该能够避免 99% 的时间使用 jQuery。

推荐阅读