제출후 각도 - 클리어 폼 입력

제출후 각도 - 클리어 폼 입력

나는 다음과 같은 간단한 양식을 가지고 있습니다.

<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한 방법이 더 있을까요?

양식에 이름을 지정하면 자동으로 추가됩니다.$scope.

양식 이름을 ""로 변경하면addForm" ('왜냐하면 나는 생각하지 않기 때문에'add-from는 각도에 대한 유효한 이름이며, 이유는 확실하지 않습니다)에 대한 참조가 있을 것입니다.$scope.addForm.

angular 1.1.1 이상을 사용하면 다음과 같은 방법이 있습니다.$scope.addForm. 양식 재설정을 재설정하는 작업을 재귀적으로 처리해야 합니다.또는 1.1.x 버전을 사용하지 않으려면 소스를 보고 에뮬레이트할 수 있습니다.

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

아래 코드와 같이 작동하도록 했습니다.

HTML 섹션

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

컨트롤러 섹션

e.FirstName= '';

언급URL : https://stackoverflow.com/questions/14684877/angular-clear-form-input-after-submit