Question

我有一个包含多个子表单的父表单（例如http://jsfiddle.net/riemersebastian/9zr00ear/3/）

当用户更改任何字段时，相应的子表单和父表单将获得类ng-dirty以指示某些内容已更改。

我在每个子表单上都有一个保存按钮（实际上它是一个链接），它保存所有子表单更改并调用子表单。$ setPristine更新子表单的状态。

但是，我希望父表单在没有脏子表单时也要注意，从而删除它的＆＃39; ng-dirty class。

我提出了这个解决方案：http://jsfiddle.net/riemersebastian/9zr00ear/3/

正如您所看到的，如果有任何子表单标记为脏，我使用jQuery手动检入控制器，如果没有，我将父表单设置为pristine。为此我需要使用$ timeout延迟jQuery，否则$ setPristine的调用可能还没有更改DOM，因此父表单不会更新。

我想知道，有更好的方法吗？

以下是代码：

var myApp = angular.module('myApp',[]);

myApp.controller('FirstCtrl', ['$scope', '$timeout', function($scope, $timeout) {          
    $scope.setFormPristine = function(subForm) {
        console.log(subForm);
        subForm.$setPristine();    

        $timeout(function() {
        if (!($('body').find(".subForm").is(".ng-dirty"))) {
           console.log("none is dirty, set main form pristine")
           $scope.form.$setPristine();
        }
        }, 10);
    }    
}]);

angular.bootstrap(document, ['myApp']);

<body>
    <div ng-controller="FirstCtrl">            
        <div>
            (outer) form is dirty? <b>{{ form.$dirty }}       </b>
        </div>
        <form name="form" ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
            <div>
                <div class="subForm" ng-repeat="variant in variants" ng-form="subForm">
                 <div>
                    <label>Duration:</label>                    
                    <input name="duration" ng-model="variant.duration"/>                    
                 </div>                  
                 <div>
                    <label>Price:</label>
                    <input name="price" ng-model="variant.price"/>                  
                </div>
                 <a href="" ng-click="setFormPristine(subForm)">Reset Form to pristine</a>
                 <div>
                    (inner) subform is dirty? <b>{{ subForm.$dirty }}           </b>
                 </div>
                  <br></br>
                </div>
            </div>            
        </form>        
    </div>        
</body>

Answer 1

ARG！得到那个jquery！ ;）

我的第一个解决方案是指令和控制器api将子表单推送通知到主表单，一些伪代码：

    app.directice('mainForm', function($scope) {
    return {
        restrict: 'E',
        transclude: true,
        controllerAs: 'mainCtrl',
        controller: function($scope){
            this.publishState = function (childIsDirty) {
                if (!$scope.parentForm.$dirty && !childIsDirty)
                    $scope.parentForm.$setPristine();
                if (childIsDirty) {
                    $scope.parentForm.$setDirty();
                }
            }
        },
        templateUrl: 'parentForm.html'
    };
});

app.directice('subForm', function ($scope) {
    return {
        require: '^parentForm',
        restrict: 'A',
        transclude: true,
        controllerAs : 'viewModel',
        link: function (scope, element, attrs, parentForm) {
            console.log("Hey I am subForm!");
            scope.$watch('subForm1.$dirty', function(isDirty, wasDirty) {
                parentForm.publishState(isDirty);
            });
        },
        controller : function() {
            var viewModel = this;
            viewModel.myData = "Hello World";
        },
        templateUrl: 'subForm.html'
    };
});

使用html你应该避免嵌套表单，被认为是糟糕的html表单（抱歉，必须这样做），他们真的不需要反正，因为所需的命令只会查看所有其他已经注入的控制器。

<div>
    <parent-form></parent-form>
    <script type="text/ng-template" id="parentForm.html">
        <form name="parentForm">
            content
        </form>
        <form name="subForm1" sub-form></form>
    </script>
    <script type="text/ng-template" id="subForm.html">
        <div>
            <input type="text" name="myInput" ng-model="viewModel.myData" >
        </div>
    </script>
</div>

您也可以将主表单方法传入范围＆＃39;＆amp;＆＃39;如果您不想链接，则为子表单。

另一种方法是创建一个共享服务/工厂，用于pubsub更改，然后表单控制器将监视属性或将其方法注册到singleton工厂。

subForm上的角度嵌套表单验证setPristine - ＆gt; parentForm上的setPristine

1 个答案: