将表单重置为原始状态（AngularJS 1.0.x）

  • Z时代
  • 2024-01-10
  • 分类：问答

AngularJS 1.1.x的路线图上有一个将表单字段重置为原始状态（重置脏状态）的功能。不幸的是，当前的稳定版本中缺少此功能。

我想知道这是否可以通过指令或其他简单的解决方法来解决。我更喜欢一种无需接触原始AngularJS来源的解决方案。为了澄清和演示该问题，提供了指向JSFiddle的链接。http://jsfiddle.net/juurlink/FWGxG/7/

上有所需功能 :

//blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html

-https :

//github.com/angular/angular.js/issues/856

拟议的解决方案 :

//github.com/angular/angular.js/pull/1127

回答：

我只是想知道我可以重新编译HTML部分并将其放回DOM中。它可以工作，适合临时解决方案，也可以使用@blesh注释中提到的方法：

控制器只能用于业务逻辑，不能用于DOM！

<div id="myform">
  <form class="form-horizontal" name="form">
  </form>
</div>

在我的控制器上resetForm()：

  • 保存原始的原始HTML

  • 重新编译保存的原始HTML

  • 从DOM中删除当前表单

  • 将新的已编译模板插入DOM

JavaScript：

var pristineFormTemplate = $('#myform').html();
$scope.resetForm = function () {
    $('#myform').empty().append($compile(pristineFormTemplate)($scope));
}

回答：

没有解决方法的解决方案

我想出了一个使用AngularJS的解决方案，没有任何解决方法。这里的技巧是使用AngularJS功能来拥有多个具有相同名称的指令。

就像其他人提到的那样，实际上存在一个拉取请求（https://github.com/angular/angular.js/pull/1127），该请求进入了AngularJS

1.1.x分支，该分支允许重置表单。提交此拉取请求会更改ngModel和form /

ngForm指令（我希望添加一个链接，但是Stackoverflow不想让我添加两个以上的链接）。

现在，我们可以定义自己的ngModel和form / ngForm指令，并使用pull请求中提供的功能对其进行扩展。

我将这些指令包装在名为resettableForm的AngularJS模块中。您要做的就是将此模块包含到您的项目中，并且在这方面，AngularJS

1.0.x版的行为就像是Angular 1.1.x版一样。

“一旦您更新到1.1.x，您甚至不必更新代码，只需删除模块即可！”

该模块还通过所有添加到1.1.x分支中的表单重置功能测试。

您可以在我创建的jsFiddle（http://jsfiddle.net/jupiter/7jwZR/1/）中的示例中看到该模块的工作情况。

回答：

(function(angular) {
// Copied from AngluarJS
function indexOf(array, obj) {
  if (array.indexOf) return array.indexOf(obj);
  for ( var i = 0; i < array.length; i++) {
    if (obj === array[i]) return i;
  }
  return -1;
}
// Copied from AngularJS
function arrayRemove(array, value) {
  var index = indexOf(array, value);
  if (index >=0)
    array.splice(index, 1);
  return value;
}
// Copied from AngularJS
var PRISTINE_CLASS = 'ng-pristine';
var DIRTY_CLASS = 'ng-dirty';
var formDirectiveFactory = function(isNgForm) {
    return function() {
        var formDirective = {
            restrict: 'E',
            require: ['form'],
            compile: function() {
                return {
                    pre: function(scope, element, attrs, ctrls) {
                        var form = ctrls[0];
                        var $addControl = form.$addControl;
                        var $removeControl = form.$removeControl;
                        var controls = [];
                        form.$addControl = function(control) {
                            controls.push(control);
                            $addControl.apply(this, arguments);
                        }
                        form.$removeControl = function(control) {
                            arrayRemove(controls, control);
                            $removeControl.apply(this, arguments);
                        }
                        form.$setPristine = function() {
                            element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
                            form.$dirty = false;
                            form.$pristine = true;
                            angular.forEach(controls, function(control) {
                                control.$setPristine();
                            });
                        }
                    },
                };
            },
        };
        return isNgForm ? angular.extend(angular.copy(formDirective), {restrict: 'EAC'}) : formDirective;
    };
}
var ngFormDirective = formDirectiveFactory(true);
var formDirective = formDirectiveFactory();
angular.module('resettableForm', []).
    directive('ngForm', ngFormDirective).
    directive('form', formDirective).
    directive('ngModel', function() {
        return {
            require: ['ngModel'],
            link: function(scope, element, attrs, ctrls) {
                var control = ctrls[0];
                control.$setPristine = function() {
                    this.$dirty = false;
                    this.$pristine = true;
                    element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
                }
            },
        };
    });
})(angular);

回答：

请注意，重置表单时必须重置模型。在您的控制器中，您可以编写：

var myApp = angular.module('myApp', ['resettableForm']);
function MyCtrl($scope) {
    $scope.reset = function() {
        $scope.form.$setPristine();
        $scope.model = '';
    };
}

回答：

<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="form">
    <input name="requiredField" ng-model="model.requiredField" required/> (Required, but no other validators)
    <p ng-show="form.requiredField.$errror.required">Field is required</p>
    <button ng-click="reset()">Reset form</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
</div>
</dvi>

以上是 将表单重置为原始状态（AngularJS 1.0.x） 的全部内容， 来源链接： utcz.com/qa/405278.html

回到顶部