使用 ui-views 和 angularjs ui 标签和无效输入

Question

我最近将一些表单中的标记切换为使用 angularJS ui 选项卡组件。标记如下所示：

<div class="col-lg-3 col-md-3 panel-container">
                        <tabset vertical="true" type="pills">
                            <tab heading="@Labels.general" select="selectView('general')"  >

                            </tab>

                            <tab heading="@Labels.passes" select="selectView('guestPasses')">

                            </tab>

                            <tab heading="@Labels.history" select="selectView('guestActivity')">

                            </tab>
                            
                            <tab heading="@Labels.userDefined 1"
                                 select="selectView('userDefined1')" >
                            </tab>                     
                            
                            <tab heading="@Labels.userDefined 2"
                                 select="selectView('userDefined2')" >
                            </tab>
                        </tabset>
                    </div>

                    <div class="col-lg-9 col-md-9 panel-container">
                        <div data-ui-view data-autoscroll="false"></div>
                        <div data-ui-view="guestPasses" data-autoscroll="false"></div>
                    </div>

控制器代码 select 视图如下：

$scope.selectView = function (viewName) {
                if ($scope.isNew) {
                    $state.go('new.' + viewName);
                }
                else {
                    $state.go('edit.' + viewName);
                }
            };

除了与原始实现相比在行为上发生了这种变化之外，一切似乎都运行良好 - 如果我在其中一个控件中进行了无效输入，切换到另一个选项卡，然后返回，那么错误的输入就消失了。保留有效输入。我想知道是否可以通过这种方式保留无效输入？

Answer 1

每个选项卡都是一个单独的 ui-视图 ui-bootstrap 并且默认情况下无效值不会应用于模型...因此当您导航到另一个 state/tab。您可以使用以下

使用 ng-model-options 覆盖行为

<input type="text" ng-model="model.value" ng-model-options="{allowInvalid:true}" ng-pattern="...">

还有一个类似的先前问题，提供了一些在全球范围内执行此操作的选项：How can I override Angular's filtering of invalid form values, forcing Angular to persist the $viewValue to $modelValue?

Answer 2

我也想分享我的解决方案，以防对某人有所帮助。在我的控制器中，我定义了以下范围变量对象数组：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    $scope.tabsViews = [{
                index: 1, name: 'general',
                invalid: false, title: resourceFactory.getResource('Labels', 'general')
            },
            {
                index: 2, name: 'guestPasses', invalid: false,
                title: resourceFactory.getResource('Labels', 'passes')
            },
            {
                index: 3, name: 'guestActivity', invalid: false,
                title: resourceFactory.getResource('Labels', 'history')
            },
            {
                index: 4, name: 'userDefined1', invalid: false,
                title: resourceFactory.getResource('Labels', 'userDefined') + ' 1'
            },
            {
                index: 5, name: 'userDefined2', invalid: false,
                title: resourceFactory.getResource('Labels', 'userDefined') + ' 2'
            }];

还有此方法 select 视图：

$scope.selectView = function (viewIndex) {
                
                var newView = objectFindByKey($scope.tabsViews, 'index', viewIndex);

                if ($scope.previousIndex != null) {
                    $scope.tabsViews[$scope.previousIndex-1]["invalid"] = $scope.form.$invalid;
                }                
                
                $scope.previousIndex = viewIndex; 
                if (newView) {
                 
                    var viewName = newView["name"];
                    if ($scope.isNew) {
                        $state.go('new.' + viewName);
                    }
                    else {
                        $state.go('edit.' + viewName);
                    }
                }
            };

然后我在 HTML 中添加了以下标记：

<div class="col-lg-3 col-md-3 panel-container">
                        <tabset vertical="true" type="pills">
                            <tab ng-repeat="tab in tabsViews" select="selectView(tab.index)"
                                 class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}">
                                <tab-heading>{{tab.title}}</tab-heading>

                            </tab>
                        </tabset>
                    </div>

                    <div class="col-lg-9 col-md-9 panel-container">
                        <div data-ui-view data-autoscroll="false"></div>
                        <div data-ui-view="guestPasses" data-autoscroll="false"></div>
                    </div>

最后这就是我对 site.css 中的类的看法：

.widget .invalid-tab * {
    background-color: #F9EAF3;
    /*color: #F9EAF3;*/
    color: #d43f3a;
}

    .widget .invalid-tab:hover * {
        background-color: #E06B6C;
        color: #ffffff;
    }

    .valid-tab {
        border-top: none;
    }

就是这样 - 一切都很好。我的无效标签得到了预期的行为。

使用 ui-views 和 angularjs ui 标签和无效输入

Using ui-views and angularjs ui Tabs and invalid input

html

javascript

uiview

angularjs

angular-ui