Question

我有一个带有输入控件的表单我需要验证，但angularjs验证不能像我预期的那样工作，我做错了

这是我的表单控件，标签之间

<form id="addServiceForm" name="addServiceForm">
<div class="form-group has-feedback" ng-class="{'has-error': addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}">
    <label class="control-label" for="qty">Cantidad</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-shopping-cart"></i></span>
        <input id="qty" name="qty" type="text" class="form-control" placeholder="Ingresa cantidad" ng-model="service.quantity" ng-required="true"/>
    </div>
    <span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    <span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" id="helpBlockQty" class="help-block">La cantidad es requerida.</span>
</div>
</form>

如果我直接指定ng-class = "'has-error'"，它会按预期工作，但是当我设置这样的条件时：

ng-class="{'has-error':addServiceForm.description.$invalid && addServiceForm.description.$dirty}"

什么都没发生，它根本不需要。

我正在使用angularjs和bootstrap，请耐心等待我=（

Answer 1

您的代码存在的问题是input上没有设置条件，例如ng-minlength，以便在.$valid或.$invalid返回true时告知Angular。因此，Angular默认为ng-minlength="1"，并且永远不会显示错误，删除所有字母。

您还应该查看$submitted方法，它非常适合表单验证。

<form id="addServiceForm" name="addServiceForm">
 <div class="form-group has-feedback" ng-class="{'has-error': addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}">
                 <label class="control-label" for="qty">dirty: {{addServiceForm.qty.$dirty}} invalid: {{addServiceForm.qty.$invalid}}</label>
                 <div class="input-group">
                     <span class="input-group-addon"><i class="glyphicon glyphicon-shopping-cart"></i></span>
                     <input id="qty" name="qty" type="text" class="form-control" placeholder="Ingresa cantidad" ng-model="service.quantity" ng-required="true"
                            ng-minlength="4"/>
                 </div>
                 <span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">
                  Another Div
                 </span>
                 <span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" id="helpBlockQty" class="help-block">La cantidad es requerida.</span>
             </div>
</form>

Answer 2

最后我可以解决这个问题，由于一个未知的原因，在控制器里面的div之后，表格无法立即定位。我刚刚在关闭div之前移动了我的html的最后一部分的代码，通过这个移动我的表单完全按照我的需要工作。

感谢您的所有意见和建议。

如果有人知道为什么这是必要的，我希望你能分享。

此致

Angularjs + bootstrap css，$ invalid属性不起作用，怎么回事？

2 个答案: