Question

我有一个多步骤表格

<div ng-init="tab=1">
<form name="mf" novalidate  ng-submit="mfCtrl.postForm()"   >
    <div ng-show="tab===1">

        <div class="form-group ">
            <label for="exampleInputEmail1">Full Name</label>
            <input type="text" class="form-control" placeholder="Name" name="name" ng-model="mfCtrl.inputData.name" required />
            <div class="error" ng-show="mf.name.$invalid && submitted">
                <small class="error" ng-show="mf.name.$error.required">
                    Your name is required.
                </small>  
            </div>
        </div>

        <button type="button" class="btn btn-primary next"  ng-click="tab=2" >Next</button>

    </div>

    <div ng-show="tab===2">

        <div class="form-group">
            <label for="exampleInputEmail1">Mobile</label>
            <input type="text" class="form-control inputfield" id="exampleInputEmail1" maxlength="10" placeholder="Mobile" name="mobile" ng-model="mfCtrl.inputData.mobile" ng-minlength=10 ng-pattern="/^[0-9]{1,10}$/" required  />
            <div class="error" ng-show="submitted && mf.mobile.$invalid">
                <small class="error" ng-show="mf.mobile.$error.required">
                    Your mobile number is required.
                </small>
            </div>
        </div>

        <button type="button" class="btn btn-primary next"  ng-click="tab=3" >Next</button>

    </div>

    <div ng-show="tab===3">

    </div>
</form>
</div>

我想在每一步进行验证，但每一步的按钮都不是提交按钮。我尝试了很多东西，但没有任何工作。在我点击按钮时使用的方法之一验证有效，但它也增加了没有用的标签。

请为此问题提供解决方案。

注意 - 我不会禁用我的按钮，但在点击按钮时显示错误

Answer 1

您可能需要this post

我也猜（我不确定它会起作用，只是尝试:)，你可以尝试使用ng-if代替ng-show：

<form name="mf" novalidate  ng-submit="mfCtrl.postForm()"   >
<div ng-if="tab===1">

    <div class="form-group ">
        <label for="exampleInputEmail1">Full Name</label>
        <input type="text" class="form-control" placeholder="Name" name="name" ng-model="mfCtrl.inputData.name" required />
        <div class="error" ng-show="mf.name.$invalid && submitted">
            <small class="error" ng-show="mf.name.$error.required">
                Your name is required.
            </small>  
        </div>
    </div>

    <button type="button" class="btn btn-primary next"  ng-click="tab=2" >Next</button>

</div>

<div ng-if="tab===2">

    <div class="form-group">
        <label for="exampleInputEmail1">Mobile</label>
        <input type="text" class="form-control inputfield" id="exampleInputEmail1" maxlength="10" placeholder="Mobile" name="mobile" ng-model="mfCtrl.inputData.mobile" ng-minlength=10 ng-pattern="/^[0-9]{1,10}$/" required  />
        <div class="error" ng-show="submitted && mf.mobile.$invalid">
            <small class="error" ng-show="mf.mobile.$error.required">
                Your mobile number is required.
            </small>
        </div>
    </div>

    <button type="button" class="btn btn-primary next"  ng-click="tab=3" >Next</button>

</div>

<div ng-if="tab===3">

</div>

Answer 2

最后，在我敲了一天之后，我找到了解决方案。因此，任何想要使用AngularJS轻松验证来创建多步骤表单的人都可以使用以下代码：

{{1}}

Answer 3

注意：这不是这个问题的直接答案，而是建议

我参与过一个需要确切需要的项目，多步骤向导，验证，数据保存等等。并且开始使用ui-router开始，最后它变得非常错误，然后我找到了一个很棒的模块：angular-multi-step-form它节省了我很多时间并且没有bug。它具有验证，数据保存等功能。

使用angularJS以多步形式验证

3 个答案: