Question

我在Angular的主页面上运行了一个涉及待办事项列表的简单示例。我想阻止用户在输入字段为空时提交待办事项。问题是当我加载页面时，我做的第一件事就是在输入字段内单击并按Enter键，然后将空白待办事项添加到Todo列表中。但是，之后验证工作。我知道还有其他方法可以做到这一点，但我想知道为什么这个bug存在以及如何修复它。

我的html下面

<form ng-submit="addTodo()">
  <input ng-model="todoText" placeholder="Add a todo here" type="text" />
  <input class="button" type="submit" value="add">
</form>

我的js文件

$scope.addTodo = function() {
  var text = $scope.todoText;
  if (text != "") {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  }
};

Answer 1

$scope.todoText为undefined，因此它会传递您的条件，然后根据您的模型变量设置为空字符串''

执行if (!$scope.todoText) {或将其初始化为空字符串$scope.todoText = '';

控制器中的

：

$scope.todoText = '';

$scope.addTodo = function() {
  if ($scope.todoText != "") {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  }
};

Answer 2

您是否尝试在输入中使用required属性？

<input type="text"
       ng-model="todoText"
       required <------------- prevents submission and marks the view as invalid
       size="30"
       placeholder="add new todo here" />

试试http://jsfiddle.net/hbulhoes/uBXfN/

防止控制器失败时的文本提交

2 个答案: