星期六, 6月 13, 2015

[AngularJS] 不透過type=reset來清除表單

記錄一下如何在angular清除表單內的值呢?
一般來說除了透過在頁面上放置一個按鈕類型為reset的效果最快。
但如果要在送出表單後,Server確定新增正確後,
再清除表單可自已新增一個resetForm的方法來處理。
以下是一個新建用戶的頁面來說明:


重設2按鈕是使用自訂的方法來清除表單資料,這裡需要額外注意type=mail資料驗證失敗是不會被寫入進$scope的,透過手動來清除,透過上圖可以清除看到$scope.user物件並無存到已輸入的錯誤文字

 $scope.resetForm = function(formModel) {
            logger.debug('resetForm');
            console.log(formModel);


            $scope.addForm.$setPristine();
            angular.copy({}, formModel);

            $scope.user.email = '';//解決email input無法清除的問題,email欄位要在通過規則後才會被model綁定
        };

頁面元素放入 ng-click="resetForm(user),user則為表單的物件
  <button type="button"
                                 ng-click="resetForm(user)" class="btn btn-default">
                                <i class="fa fa-refresh"></i> 重設2</button>

沒有留言:

張貼留言

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails