解决ionic中表单提交之后再次新建表单无法同步ng-model中数据的bug

  • 2017-08-31
  • 0
  • 0

举例来说,有ionic模板文件如下:

  1.  <ion-view title="Form">
  2.    <ion-nav-buttons side="right">
  3.      <button class="button button-clear" type="submit" form="applyForm">Save</button>
  4.    </ion-nav-buttons>
  5.    <ion-content padding="false" scrollbar-y="false" class="has-header">
  6.      <form id="applyForm" name="applyForm" ng-submit="onSubmit(applyForm)" novalidate autocomplete="off">
  7.      <div class="list">
  8.        <label class="item item-input item-floating-label">
  9.          <span class="input-label">First Name</span>
  10.          <input type="text" name="fname" ng-model="data.fname" placeholder="First Name">
  11.        </label>
  12.        <label class="item item-input item-floating-label">
  13.          <span class="input-label">Last Name</span>
  14.          <input type="text" name="lname" ng-model="data.lname" placeholder="Last Name">
  15.        </label>
  16.        <label class="item item-input item-floating-label">
  17.          <span class="input-label">Email</span>
  18.          <input type="email" name="email" ng-model="data.email" placeholder="Email" ng-required="true">
  19.        </label>
  20.      </div>
  21.      </form>
  22.    </ion-content>
  23.  </ion-view>

对应的Controller内容如下:

  1.  angular.module('app.controllers', [])
  2.  .controller('FormController', function($scope) {
  3.      $scope.data = {};
  4.      var originalData = angular.copy($scope.data);
  5.  
  6.      $scope.onSubmit = function(form) {
  7.          if(!form.$valid) {
  8.              return;
  9.          }
  10.  
  11.          // save data to server
  12.          var data = $scope.data;
  13.  
  14.          // go to the list page
  15.          $state.go('app.home.list').then(functin() {
  16.              // reset data
  17.              $scope.data = angular.copy(originalData);
  18.             
  19.              // reset form
  20.              form.$setPristine();
  21.              form.$setValidity();
  22.              form.$setUntouched();
  23.          });
  24.      };
  25.  });

但是如果表单第一次提交之后,再次调用这个表单的时候,表单中的ng-model绑定的data在调用onSubmit方法的时候无法进行同步,一直都是初始化的数据,所以这个时候表单校验的时候一直都是未通过的。

造成这个问题的原因是view有缓存所致,需要将缓存清除掉,有三种方式:
(1) 在模板ion-view中设置cache-view为false,即: ion-view cache-view="false"
(2) 在路由中设置cache为false,如下图所示:

(3) 还有一种方法是禁用所有view的cache,在config中做如下设置:

  1.  angular.module('app', ['ionic', 'ngCordova'])
  2.  .config(function($ionicConfigProvider) {
  3.      // 禁用所有的页面缓存
  4.      $ionicConfigProvider.views.maxCache(0);
  5.  });

不过使用上述方法的时候有一个问题,在表单中会遇到如下单选或多选的控件:

两个view之间的数据使用Service进行共享,详细的可以参考这篇文章:https://forum.ionicframework.com/t/change-variable-of-previous-view-before-going-back-with-ionichistory-goback/16309/9?u=jetma。这个时候如果将view的cache禁用了的话,就无法使用这种方式共享数据了。

最终解决的方法是在controller初始化之前清除当前页面的缓存,这样既解决了第二次使用表单无法数据同步的问题,又解决了使用Service共享多屏之间数据的问题,代码如下:

  1.  angular.module('app.controllers', [])
  2.  .service('FormService', function() {
  3.      this.formData = {};
  4.  })
  5.  .controller('FormController', function($scope, FormService) {
  6.  
  7.      // 清除view中的缓存,否则再次提交表单的时候无法同步ng-model中的数据
  8.      $ionicHistory.clearCache();
  9.  
  10.      // 初始化model数据
  11.      $scope.data = FormService.formData = {};
  12.      var originalData = angular.copy($scope.data);
  13.  
  14.      $scope.onSUbmit = function(form) {
  15.          if(!form.$valid) {
  16.              return;
  17.          }
  18.  
  19.          // save data
  20.          $state.go('app.home.list').then(functin() {
  21.              $scope.data = angular.copy(originalData);
  22.             
  23.              form.$setPristine();
  24.              form.$setValidity();
  25.              form.$setUntouched();
  26.          });
  27.      };
  28.  });

参考资料:
angularjs form reset error
$state.go isn’t refreshing my view
HOW TO REFRESH A VIEW IN IONIC
Change variable of previous view before going back with $ionicHistory.goBack();
bug: $ioniocHistory.clearCache does always work

评论

还没有任何评论,你来说两句吧