AngularJS v1.5.5 Форма сброса не работает для недопустимых полей ввода

У меня есть код ниже (или см. скрипку), и я пытаюсь сбросить форму и очистить все поля ввода тоже для каждой формы.

С AngularJS версии 1.2.1 работает нормально! но в моем приложении я использую версию 1.5.5, потому что у меня есть другие библиотеки для разделения вложенных форм в тегах <md-tab> с использованием материальной структуры, которым нужна эта версия.

проблема заключается в том, что если какое-либо поле является недействительным, то reset не работает должным образом, и эти поля оставаться неизменными, а не быть ясными.

Есть еще один способ очистить все поля (вложенной формы), когда я нажимаю кнопку сброса?

angular.module("main", [])
  .controller("register", function($scope) {
    $scope.data = {
      A: {},
      B: {}
    };

    $scope.reset = function(form) {
      form.$setPristine();
    };

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body ng-app="main">
  <div ng-controller="register" class="form">

    <form name="form" novalidate role="form">

      <div class="form">


        <h1>TAB1 - Form A:</h1>
        <ng-form name="A">
          A1:
          <input type="text" ng-model="data.A.A1" ng-minlength="4" ng-maxlength="15" />A2:
          <input type="text" ng-model="data.A.A2" ng-minlength="4" ng-maxlength="15" />
          <button type="button" ng-disabled="A.$pristine" ng-click="reset(A); data.A=null;">Reset</button>
          <br/>
          <strong>A.$pristine =</strong> {{A.$pristine}}
          <strong>A.$valid =</strong> {{A.$valid}}
        </ng-form>
      </div>
      <br/>
      <br/>

      <div class="form">


        <h1>TAB2 - Form B:</h1>
        <ng-form name="B">
          B1:
          <input type="text" ng-model="data.B.B1" ng-minlength="4" ng-maxlength="15" />B2
          <input type="text" ng-model="data.B.B2" ng-minlength="4" ng-maxlength="15" />

          <button type="button" ng-disabled="B.$pristine" ng-click="reset(B); data.B=null;">Reset</button>
          <br/>
          <strong>B.$pristine =</strong> {{B.$pristine}}
          <strong>B.$valid =</strong> {{B.$valid}}
        </ng-form>
      </div>
    </form>

    <h1>data:</h1>
    <pre>{{data | json}}</pre>

  </div>
</body>


angularjs angularjs-material
person kwstarikanos    schedule 26.10.2016    source источник
comment
Можете ли вы предоставить скрипку, которая воспроизводит проблему?   -  person William B    schedule 26.10.2016
comment
проверьте это, которое использует AngularJs 1.4.8, и сброс не работает для недопустимых полей ввода: jsfiddle.net/kwstarikanos/ utwf604r/11   -  person kwstarikanos    schedule 26.10.2016

Ответы (1)


arrow_upward
1
arrow_downward

Это связано с тем, что ng-model связывается с объектами A и B по ссылке в $scope.data. Если вы удалите $scope.data.A = null из своего ng-click и сбросите объект, не создавая новый, это сработает:

https://jsfiddle.net/utwf604r/15/

$scope.reset = function (form)
{
  // don't change the reference to A
  // $scope.data.A = {} wont work!!
    angular.extend($scope.data, {A:{A1:'',A2:''}, B:{B1:'',B2:''}});
    form.$setPristine();
};
person William B    schedule 26.10.2016
comment
спасибо, ваши изменения действительно работают, но я попытаюсь преобразовать их следующим образом: когда пользователь нажимает кнопку сброса формы A, я хочу сбросить только «форму A». Есть способ получить переменную «data.A» (или «data.B» соответственно) из аргумента «form» внутри функции «reset», чтобы избежать использования switch-case? - person kwstarikanos; 26.10.2016
comment
новое обновление: jsfiddle.net/kwstarikanos/utwf604r/17 (в конце концов я думаю, что есть нет способа избежать использования переключателя) - person kwstarikanos; 26.10.2016
comment
Вы можете отключить имя формы следующим образом: jsfiddle.net/utwf604r/18 или даже проще, передать модель, которую необходимо явно сбросить в качестве второго параметра: jsfiddle.net/utwf604r/19 - person William B; 26.10.2016