角度-提交后清除表单输入

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();
    }
}

现在，我知道从这样的控制器修改DOM在Angular文档中是很陌生的-但是还有更多的Angular方式可以做到这一点吗？

Answer 1

当您给表单命名时，它会自动添加到中$scope。

因此，如果您将表单名称更改为“ addForm”（因为我认为不是add- fromangular的有效名称，不确定原因），您将引用$scope.addForm。

如果您使用的是Angle
1.1.1或更高版本，则您将在上找到一个$setPristine()方法$scope.addForm。这应该以递归的方式来重置您的表格。或者，如果您不想使用1.1.x版本，则可以查看源代码并进行仿真。