使用AngularJS中的按钮进行条件要求的验证

时间:2017-03-24 10:42:16

标签: javascript angularjs validation

我有两个按钮作为保存和提交以及一些下拉菜单和文本框。单击“提交”时需要验证某些字段,而不是单击“保存”。请在下面找到代码。

<button class="btn btn-default custom_edit" 
                            data-ng-click="orderForm.$valid && saveOrder('save')" 
                            data-ng-if="!order.IsSubmitted"
                            data-ng-model="status"
                            value="save">Save</button>
<button class="btn btn-success" 
                            data-ng-click="orderForm.$valid && saveOrder('submit')" 
                            data-ng-if="!order.IsSubmitted"
                            data-ng-model="status"
                            value="submit">Submit</button>

 <input type="text" class="form-control" name="_requisition" placeholder="Requisition"
                                        data-ng-model="order.Requisition"
                                        data-ng-trim="true"
                                        data-ng-required="status=='save'"/>

我尝试过使用价值&amp;带有按钮的模型并使用ng-required进行应用,但它不起作用。

1 个答案:

答案 0 :(得分:0)

使用输入类型作为'submit',可以保持验证以及其他函数也可以调用,因为表单有效。

<input type="submit" value="Save"
                            data-ng-click="isSave = true; orderForm.$valid && saveOrder('save')" 
                            data-ng-model="isSave" 
                            data-ng-show="!order.IsSubmitted"/>
<input type="submit" value="Submit"
                            data-ng-click="isSave = false; orderForm.$valid && saveOrder('submit')" 
                            data-ng-model="isSave"  
                            data-ng-show="!order.IsSubmitted"/>

<input type="text" class="form-control" name="_requisition" placeholder="Requisition"
                            data-ng-model="order.Requisition"
                            data-ng-trim="true"
                            maxlength="100"
                            data-ng-required="isSave"/>

通过这种方式,我们可以在运行时轻松设置按钮点击模型值,也可以验证表单。