Question

我有一个表单，可以在我的待办事项列表数组中添加项目。但是，如果输入字段为空，我的函数是向我的数组添加一个空值。

验证表单的最佳方法是什么？

        <form name="formaddtodo" ng-submit="todoList.addTodo()">
            <input type="text" ng-model="todoList.todoText" ng-minlength="1"  size="30"
                   placeholder="Voeg nieuwe todo toe">
            <input class="btn-primary" type="submit" value="voeg toe">
        </form>

这是我的功能

todoList.addTodo = function() {
                todoList.todos.push({text:todoList.todoText, done:false});
                todoList.todoText = '';
        };

尚无验证，但我很好奇验证的最佳方法是什么。

提前谢谢！

Answer 1

<form name="formaddtodo" ng-submit="todoList.addTodo(formaddtodo.$valid)">
        <input type="text" ng-model="todoList.todoText" ng-minlength="1"  size="30"
               placeholder="Voeg nieuwe todo toe" required>
        <input class="btn-primary" type="submit" value="voeg toe">
    </form>


todoList.addTodo = function(isValid) {
           if(isValid) {
            todoList.todos.push({text:todoList.todoText, done:false});
            todoList.todoText = '';
           }
    };

我认为上述代码可以帮助您验证表单。

Answer 2

您可以使用内置的ngRequired指令：

<input type="text" ng-model="todoList.todoText" ng-minlength="1"  size="30"
       placeholder="Voeg nieuwe todo toe" ng-required="required">

AngularJS为大多数常见HTML5输入提供基本实现类型:(文本，数字，网址，电子邮件，日期，广播，复选框），以及一些验证指令（必需，模式，minlength， maxlength，min，max）。

https://docs.angularjs.org/guide/forms

Answer 3

ngMessages模块支持向用户显示消息以进行表单验证。

ngMessages，开发人员不得不依赖ng-class和ng-show等指令来显示这些错误。

请按照link进行操作。它现在和将来用于AngulerJS验证可能会有用。

使用angularJS验证输入文本

3 个答案: