如何使用ng-include插入表单时验证表单

时间:2013-12-21 18:31:06

标签: angularjs

我有3个不同的表单页面,它们在引导模式窗口中使用ng-include插入到DOM中。在各种形式中进行验证的最佳方法是什么,并在这样的场景中提交完整的表单(对于所有3种表单)?

HTML

<div ng-switch on="page">
    <div ng-switch-when="Games">
        <div ng-include="'Games.html'"></div>
    </div>  
    <div ng-switch-when="Music">
        <div ng-include="'Music.html'"></div>
    </div>
    <div ng-switch-when="Videos">
        <div ng-include="'Videos.html'"></div>
    </div>
</div>

演示:http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview

1 个答案:

答案 0 :(得分:0)

还有一种方法可以验证数据 (可以使用jqueryvalidation)但可以作为起点。 我认为没有办法获得游戏的价值。$有效 所以我想到了

var app = angular.module("myApp", [])
            app.controller("FormsCtrl", function($scope) {
               //console.log($scope);
               // $scope.items = ['Games', 'Music', 'Videos'];
                $scope.$on('someEvent',function(e,a){
                   console.log(a); 
                })
            });
            app.directive("myform", function() {
                return {
                    restrict: "A",
                    link:function(scope,element,attrs){
                        element.bind('submit',function(e){
                            var isValid = false; // TO DO :)
                            scope.$emit('someEvent', [attrs.fname,isValid]);
                        });
                    }
                }
            });



<div ng-controller="FormsCtrl"> 
      <div ng-switch on="page">
            <div ng-switch-when="Games">
                <div ng-include="'Games.html'"></div>
            </div>  
            <div ng-switch-when="Music">
                <div ng-include="'Music.html'"></div>
            </div>
            <div ng-switch-when="Videos">
                <div ng-include="'Videos.html'"></div>
            </div>
    </div>
</div>


<form name="games"  class="simple-form"  myform fname="games">
   <input type="text" ng-model="prefix.games.name" name="uName" required /><br>
</form>

修改 更快捷的方式:)

app.controller("FormsCtrl", function($scope) {
                $scope.mySubmit = function(isValid){
                    console.log(isValid);
                }
            });


<form name="games"  class="simple-form" ng-submit="mySubmit(games.$valid)">
   <input type="text" ng-model="prefix.games.name" name="uName" required /><br>
</form>