AngularJS сбросить форму полностью

0

У меня довольно большая форма, которая проверяется на стороне клиента Angular. Я пытаюсь выяснить, как сбросить состояние формы и ее входы, просто нажав кнопку "Сброс".

Я пробовал $setPristine() в форме, но это действительно не работает, а это означает, что он не очищает ng-* чтобы сбросить форму в исходное состояние без проверки.

Вот короткая версия моей формы:

<form id="create" name="create" ng-submit="submitCreateForm()" class="form-horizontal" novalidate>
    <div class="form-group">
        <label for="name" class="col-md-3 control-label">Name</label>
        <div class="col-md-9">
            <input required type="text" ng-model="project.name" name="name" class="form-control">
            <div ng-show="create.$submitted || create.name.$touched">
                <span class="help-block" ng-show="create.name.$error.required">Name is required</span>
            </div>  
        </div>
    </div>
    <div class="form-group">
        <label for="lastName" class="col-md-3 control-label">Last name</label>
        <div class="col-md-9">
            <input required type="text" ng-model="project.lastName" name="lastName" class="form-control">
            <div ng-show="create.$submitted || create.lastName.$touched">
                <span class="help-block" ng-show="create.lastName.$error.required">Last name is required</span>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-default" ng-click="resetProject()">Reset</button>
</form>

И моя функция сброса:

$scope.resetProject = function() {
    $scope.project = {
        state: "finished",
        topic: "Home automation"
    };
    $("#create input[type='email']").val('');
    $("#create input[type='date']").val('');
    $scope.selectedState = $scope.project.state;
    // $scope.create.$setPristine(); // doesn't work
}

Также, если вы могли бы помочь мне очистить входные значения полей электронной почты и даты без использования jQuery, было бы замечательно. Поскольку установка $scope.project на то, что определено выше, по какой-то причине не сбрасывает поля.

  • 0
    Что значит «это действительно не сработало»?
  • 0
    Также было бы полезно получить plnkr, показывающий вашу проблему.
Показать ещё 6 комментариев
Теги:
forms

2 ответа

0
Лучший ответ

Как упоминалось в комментариях, вы можете использовать $setUntouched();

https://docs.angularjs.org/api/ng/type/form.FormController# $ setUntouched

Это должно вернуть форму новому состоянию.

Итак, в этом случае $scope.create.$setUntouched(); должен сделать трюк

Отредактируйте все эти jquery. Вы никогда не должны взаимодействовать с DOM через контроллеры. Это то, что предназначены для

Если вы хотите сбросить заданное свойство, выполните следующее:

$scope.resetProject = function() {
    $scope.project = {
        state: "finished",
        topic: "Home automation"
    };
    $scope.project.lastName = '';
   $scope.project.date= '';
}
1

Попробуйте очистить через ng-модель

$scope.resetProject = function() {
  $scope.project = {
      state: "finished",
      topic: "Home automation"
  };
  $("#create input[type='email']").val('');
  $("#create input[type='date']").val('');
  $scope.selectedState = $scope.project.state;

  $scope.project = {
      name: "",
      lastName: ""
  };
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню