多个选项卡窗格AngularJS验证

时间:2017-10-14 12:32:41

标签: angularjs validation

我首先在2个标签窗格中显示一个客户端表单,如果无效,我将禁用提交按钮。

但是我怎样才能检查第二个选项卡是否为空字段,因为它只是一种形式。 所以我需要2个窗格需要ng。

  <form class="form-horizontal" name="client" novalidate>


    <div class="box-header with-border">

        <!-- Custom Tabs  -->
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs pull-right">
                <li><a href="#tab_3-2" target="_self" data-toggle="tab">1</a></li>
                <li><a href="#tab_2-2" target="_self" data-toggle="tab">2</a></li>
                <li class="active"><a href="#tab_1-1" target="_self" data-toggle="tab">3</a></li>
                <li class="pull-left header"><i class="fa fa-user-plus" aria-hidden="true"></i> data</li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_1-1">
                    <div class="form-group">
                        <!--{{client}}--> 

                        <label for="name" class="col-sm-2 control-label">Nome</label>
                        <div class="col-sm-10">
                            <input type="text" ng-model="client.name" class="form-control" placeholder="Nome" ng-required="true">
                        </div>
                    </div>

                    </div>
                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane" id="tab_2-2">
                    <div class="form-group">
                        <label for="test" class="col-sm-2 control-label">test</label>
                        <div class="col-sm-10">
                            <input type="text" ng-model="test" class="form-control" id="test" placeholder="test">
                        </div>
                    </div>

                    </div> <!-- /.box box-info -->
                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane" id="tab_3-2">
                    <div class="box-footer">
                        <a href="#" class="btn btn-default">test</a>
                        <a class="btn btn-info" ng-click="insertClient()" target="_self" prevent-default>test</a>
                    </div>
                </div>
                <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
        <!-- END CUSTOM TABS -->
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <a href="#" class="btn btn-default">Cancelar</a>
        <a class="btn btn-info pull-right"  target="_self" ng-disabled="client.$invalid" prevent-default>Criar</a>
    </div>
    <!-- /.box-footer -->

所以我需要验证选项卡窗格1(tab_1-1)和选项卡窗格2(tab_2-2)

0 个答案:

没有答案