Question

我正在处理表单的功能。此表单的数据来自api调用和填充输入字段。提交按钮运行良好，但取消按钮的行为很奇怪，而不是取消最后更改它将更新的数据发送到数据库。有人能帮我找到我的错吗？此外，我尝试type="reset"并返回默认的空字段，但我需要在编辑之前返回旧值

我的表格：

<form style="padding: 15px" ng-submit="submitForm()">
       <div class="form-group row">
            <div ng-repeat="k in rowKeys | filter: '!id' | filter: '!0' " ng-model="rowValue">
                <label for="rowValue"  class="col-sm-2">
                       {{k | hide:'.name' | makeUppercase}}:
               </label>
            <div class=" col-sm-2" >
                <input class="form-control rowValue"  id="rowValue" ng-model="rowData[k]" ng-disabled="isDisabled()"/>
            </div>
        </div>
     </div>
 <button type="submit" class="btn btn-default" ng-if="rowData" >Save</button>
 <button  type="button" class="btn" ng-if="rowData" ng-click="cancelForm()">Cancel</button>

JS

$scope.submitForm = function() {

        $scope.$watch('rowData', function(newValue, oldValue) {
                console.log('being watched oldValue:', oldValue, 'newValue:', newValue);
            }, true);

        $http({
            method  : 'PUT',
            url     : $scope.globalUrl + $scope.id,
            data    : $scope.rowData //form
        })
        .then(function (res) {
                return res;
            })
            .then(function (){
                $('#table').bootstrapTable('refreshOptions', {
                    'url': $scope.globalUrl
                });
            })
    };

        $scope.cancelForm = function () {
            $scope.$watch('rowData', function(newValue, oldValue) {
                return oldValue;
                console.log('being watched oldValue:', oldValue, 'newValue:', newValue);
            }, true);
        }

Answer 1

更改

 <button type="submit" class="btn" ng-if="rowData" ng-click="cancelForm()">Cancel</button>

要

 <button type="button" class="btn" ng-if="rowData" ng-click="cancelForm()">Cancel</button>

当您放置type="submit"时，这意味着点击它会在您的表单上执行提交操作

功能“取消”添加编辑的表单而取消它

1 个答案: