gwh*_*whn 10 validation angularjs angular-ui-router
我有一个分布在多个标签上的表单.最初,我使用了ui-bootstrap的tabset指令,但后来要求深层链接到特定的选项卡,所以我想我会使用ui-router的嵌套视图.
我遇到的问题是父表单只在所有子表单有效时才有效,但是使用ui-router状态,一次只加载一个子表单.
的index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="script.js"></script>
</head>
<body class="container-fluid">
<div ui-view>
<ul class="list-unstyled">
<li><a ui-sref="edit.basic">Basic</a></li>
<li><a ui-sref="edit.extended">Extended</a></li>
</ul>
</div>
</body>
</html>
的script.js
angular.module('app', ['ui.router']).
config(function($stateProvider) {
$stateProvider.state('edit', {
abstract: true,
url: '/edit/',
templateUrl: 'edit.html',
controller: function($scope) {
$scope.model = {};
}
}).
state('edit.basic', {
url: '/basic',
templateUrl: 'basic.html'
}).
state('edit.extended', {
url: '/extended',
templateUrl: 'extended.html'
});
});
edit.html
<div class="row" ng-form="editForm">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<li ui-sref-active="active">
<a ui-sref="edit.basic">Basic</a>
</li>
<li ui-sref-active="active">
<a ui-sref="edit.extended">Extended</a>
</li>
</ul>
</div>
<div class="col-xs-12" ui-view></div>
<div class="col-xs-12">
<button type="button" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button>
</div>
<div class="col-xs-12">
<hr>
<tt>model = {{model}}</tt><br>
<tt>editForm.$valid = {{editForm.$valid}}</tt><br>
<tt>editForm.basicForm.$valid = {{editForm.basicForm.$valid}}</tt><br>
<tt>editForm.extendedForm.$valid = {{editForm.extendedForm.$valid}}</tt>
</div>
</div>
basic.html
<div ng-form="basicForm">
<div class="form-group">
<label for="textProperty">Text Property</label>
<input type="text" class="form-control" name="textProperty" id="textProperty" ng-model="model.textProperty" required>
</div>
</div>
extended.html
<div ng-form="extendedForm">
<div class="form-group">
<label for="numericProperty">Numeric Property</label>
<input type="number" class="form-control" name="numericProperty" id="numericProperty" ng-model="model.numericProperty" required>
</div>
<div class="form-group">
<label for="dateProperty">Date Property</label>
<input type="date" class="form-control" name="dateProperty" id="dateProperty" ng-model="model.dateProperty" required>
</div>
</div>
我开始相信这种方法不适合我的目的.我应该继续使用tabset并使用state参数来激活相应的选项卡,而不是使用嵌套视图.
我很想知道其他人如何解决它.
更新1:
这是我提出的一个使用ui-bootstrap tabset的解决方案,但不使用嵌套的ui-router状态,而是参数化活动选项卡.
更新2:
这是一个解决方案,它遵循Santiago Rebella的建议,使用嵌套状态和验证器服务
更新3:
您可以尝试按照您向某个服务传递某种属性(如step1,step2等)的方式来执行此操作,并添加true或您可能使用的任何成功值,因此一旦所有这些属性都为真,就在您的ng中-disabled或您构建表单的方式,允许提交.
也许以前的表格步骤可以将输入的值存储在服务的对象中.我想通过这种方式你可以使用多页表格.