angularjs - ngsubmit - Angular-borrar la entrada de formulario después de enviar

validar formulario angular 5

Question

Tengo una forma simple como tal:

<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>

con mi controlador de la siguiente manera:

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

lo que me gustaría hacer es borrar la entrada de texto después del envío, así que simplemente borro el valor del modelo:

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

Excepto ahora, porque la entrada del formulario es ''obligatoria'', aparece un borde rojo alrededor de la entrada del formulario. Este es el comportamiento correcto, pero no es lo que quiero en este escenario ... así que me gustaría borrar la entrada y luego difuminar el elemento de entrada. Lo que me lleva a:

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

Ahora, sé que modificar el DOM desde el controlador de esta forma está mal visto en la documentación de Angular, pero ¿hay una forma más angular de hacerlo?

Answer 1

Cuando le asigna un nombre a su formulario, se agrega automáticamente a $scope .

Entonces, si cambia el nombre de su formulario a " addForm " (porque no creo que add-from sea ​​un nombre válido para angular, no estoy seguro de por qué), tendrá una referencia a $scope.addForm .

Si usa angular 1.1.1 o superior, tendrá un $setPristine() en $scope.addForm . Lo cual debería recursivamente cuidar de restablecer su formulario. o si no quiere usar las versiones 1.1.x, puede $setPristine() y emularla.

Answer 2

Lo he hecho funcionar como el código de abajo.

SECCION HTML

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

SECCION DE CONTROL

e.FirstName = '''';

Answer 3

Para aquellos que aún no han cambiado a 1.1.1, aquí hay una directiva que se desenfocará cuando cambie la propiedad $ scope:

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

El controlador ahora debe cambiar una propiedad cada vez que se produce un envío. Pero al menos no estamos manipulando DOM en un controlador, y no tenemos que buscar el elemento por 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