提交后的Angular - clear表单输入

Question

我有一个简单的形式:

<form name="add-form" data-ng-submit="addToDo()">
    <label for="todo-name">Add a new item:</label>
    <input type="text" data-ng-model="toDoName" id="todo-name" name="todo-name" required>
    <button type="submit">Add</button>
</form>

我的控制器如下:

$scope.addToDo = function() {
    if ($scope.toDoName !== "") {
        $scope.toDos.push(createToDo($scope.toDoName));
    }
}

我想做的是在提交后清除文本输入,所以我只需清除模型值:

$scope.addToDo = function() {
    if ($scope.toDoName !== "") {
        $scope.toDos.push(createToDo($scope.toDoName));
        $scope.toDoName = "";
    }
}

除了现在,因为表单输入是"必需的",我在表单输入周围得到一个红色边框.这是正确的行为,但不是我想要的在这种情况下......所以我想清除输入然后模糊输入元素.这导致我:

$scope.addToDo = function() {
    if ($scope.toDoName !== "") {
        $scope.toDos.push(createToDo($scope.toDoName));
        $scope.toDoName = "";
        $window.document.getElementById('todo-name').blur();
    }
}

现在,我知道在Angular文档中对这样的控制器中的DOM进行修改是不受欢迎的 - 但是有更多的Angular方法吗？

Answer 1

当您为表单命名时,它会自动添加到表单中$scope.

因此,如果您将表单名称更改为" addForm"(因为我认为add-from它不是角度的有效名称,不确定原因),您将引用$scope.addForm.

如果你使用角1.1.1或更高,你将有一个$setPristine()方法$scope.addForm.应该递归地处理重置您的表单.或者如果您不想使用1.1.x版本,可以查看源代码并模拟它.