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

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

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

problem есть, когда какое-либо поле недействительно, то 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>

источник

2016-10-26 kwstarikanos

вы можете предоставить скрипку, которая воспроизводит эту проблему? –

проверьте это, используя AngularJs 1.4.8, и сброс не работает для недопустимых полей ввода: https://jsfiddle.net/kwstarikanos/utwf604r/11/ – kwstarikanos

Это потому, что 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(); 
};

источник

2016-10-26 04:06:35

спасибо, ваши изменения действительно работают, но я попытаюсь преобразовать, как следует: когда пользователь нажимает на кнопку сброса формы, я хочу сбросить только «форму». Есть способ получить переменную «data.A» (или «data.B» соответственно) из аргумента «form» внутри функции «reset», чтобы избежать использования ключа переключения? – kwstarikanos

новое обновление: https://jsfiddle.net/kwstarikanos/utwf604r/17/ (в конце концов я думаю, что нет способа избежать использования коммутатора) – kwstarikanos

Вы можете отменить имя формы так: https: // jsfiddle .net/utwf604r/18/или даже проще, перейдите в модель, которая должна быть явно сброшена в качестве второго параметра: https://jsfiddle.net/utwf604r/19/ –

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

ответ

Смежные вопросы