Angular - ввод чистой формы после отправки

У меня простая форма:

<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 сделать это?

Ответ 1

Когда вы даете имя своей форме, оно автоматически добавляется к $scope.

Итак, если вы измените имя своей формы на "addForm" (потому что я не думаю, что add-from является допустимым именем для angular, не знаю почему), вы получите ссылку на $scope.addForm.

Если вы используете angular 1.1.1 или выше, у вас будет $setPristine() метод $scope.addForm. которые должны рекурсивно позаботиться о сбросе формы. или если вы не хотите использовать версии 1.1.x, вы можете посмотреть источник и эмулировать его.

Ответ 2

Для тех, кто еще не переключился на 1.1.1, вот директива, которая будет размываться при изменении свойства $scope:

app.directive('blur', function () {
  return function (scope, element, attrs) {
    scope.$watch(attrs.blur, function () {
        element[0].blur();
    });
  };
});

Контроллер должен теперь изменять свойство всякий раз, когда возникает отправка. Но по крайней мере мы не выполняем манипуляции с DOM в контроллере, и нам не нужно искать элемент по ID:

function MainCtrl($scope) {
    $scope.toDos = [];
    $scope.submitToggle = true;
    $scope.addToDo = function () {
        if ($scope.toDoName !== "") {
            $scope.toDos.push($scope.toDoName);
            $scope.toDoName = "";
            $scope.submitToggle = !$scope.submitToggle;
        }
    };
}

HTML:

<input type="text" data-ng-model="toDoName" name="todo-name" required 
  blur="submitToggle">

Plnkr

Ответ 3

Я запустил его, как показано ниже.

РАЗДЕЛ HTML

<td ng-show="a">
 <input type="text" ng-model="e.FirstName" />
</td>

Контроллер СЕКЦИЯ

e.FirstName = '';