Форма Angularjs reset

У меня есть функция reset в angular, чтобы очистить все поля в форме. Если я сделаю что-то вроде:

<a href="#" ng-click="resetForm()">reset</a>

$scope.resetForm = function() {
  $scope.someForm = {};
}

Все работает отлично. Но я хочу использовать эту функцию для нескольких форм на сайте. Если я передаю объект формы следующим образом:

<a href="#" ng-click="resetForm(someForm)">reset</a>

$scope.resetForm = function(form) {
  $scope.form = {};
}

Тогда это не сработает. Может кто-нибудь объяснить мне, почему это происходит?

Ответы

Ответ 1

У вас есть 2 проблемы:

  • Вы не получаете доступ к переданной переменной, по-прежнему обращаетесь к someForm текущей области.
  • Когда вы передаете параметр функции, он передается по ссылке. Даже если вы используете form = {}, он не работает, потому что он меняет ссылку на параметр, а не ссылку на переданную в someForm.

Try:

$scope.resetForm = function(form) {
  //Even when you use form = {} it does not work
  form.fieldA = null;
  form.fieldB = null;
  ///more fields
}

или

$scope.resetForm = function(form) {
      //Even when you use form = {} it does not work
      angular.copy({},form);
    }

вместо:

$scope.resetForm = function(form) {
  $scope.form = {};
}

В вашем плунге я вижу, что вы не отделяете представление от модели. Вы должны сделать это для разделения проблем и избежать проблем, которые могут возникнуть, если вы очистите все поля (включая поля объекта формы DOM).

<form name="form2" ng-controller="SecondController">
      <label for="first_field">First Field</label>
      <input ng-model="form2Model.first_field" />
      <br />
      <label for="second_field">Second Field</label>
      <input ng-model="form2Model.second_field" />
      <br />

      <a href="#" ng-click="secondReset(form2Model)">Reset the form</a>
    </form>

http://plnkr.co/edit/x4JAeXra1bP4cQjIBld0?p=preview

Ответ 2

Вы также можете сделать:

form.fieldA = undefined;

Он отлично работает для переключателей и флажков.