Question

我有一个angularjs视图，其中包含以下输入字段，该字段取决于用户所在的组织。

<div class="form-group" ng-class="{'has-error': isDirtyAndInvalid(provisionVMForm.vmHostPrefix)}">
    <label class="col-sm-2 control-label" for="vmHostPrefix">Host Prefix*</label>
    <div class="col-sm-8">
        <div ng-show="$root.sessionObj.org.name=='orgName1'>
            <input id="vmHostPrefix" name="vmHostPrefix" class="form-control" type="text" 
                 required="true"
                 ng-maxlength="12"
                 ng-minlength="12"
                 placeholder="Host Prefix"
                 ng-blur="setdirtyFromFocus(provisionVMForm.vmHostPrefix)"
                 ng-model="vmHostnamePrefix"/>
                 <div class="pull-left alert alert-danger form-validation-alert" role="alert"
                 ng-show="provisionVMForm.vmHostPrefix.$error.minlength || 
                 provisionVMForm.vmHostPrefix.$error.maxlength>
                     Host Prefix must be 12 characters long. 
                 </div>
        </div>
        <div ng-show="$root.sessionObj.org.name=='orgName2'>
            <input id="vmHostPrefix" name="vmHostPrefix" class="form-control" type="text" 
                 required="true"
                 ng-maxlength="4"
                 ng-minlength="4"
                 placeholder="Host Prefix"
                 ng-blur="setdirtyFromFocus(provisionVMForm.vmHostPrefix)"
                 ng-model="vmHostnamePrefix"/>
                 <div class="pull-left alert alert-danger form-validation-alert" role="alert"
                 ng-show="provisionVMForm.vmHostPrefix.$error.minlength || 
                 provisionVMForm.vmHostPrefix.$error.maxlength>
                     Host Prefix must be 4 characters long. 
                 </div>
        </div>
    </div>
</div>

我需要做的是确定用户当前所在的组织，并且依赖于组织，主机名前缀输入字段只能是一定长度。现在，当我在我的代码中只有第一个ng-show时，这完全正常。如果输入小于或大于12个字符，它会正确识别组织名称和表单。每当我添加我的第二个ng-show来识别我的第二个组织时......我对组织＃1的第一个组织表单验证是不正确的。如果输入为12个字符，表单只会抱怨。我需要它是相反的。通过添加第二个ng-show，我有什么想法？我尝试使用ng-if尝试识别组织并且使用表单验证工作正常..但是我的vmHostPrefix变量在我的控制器中解析为undefined。任何帮助表示赞赏！

Answer 1

ng-show使用display：none隐藏元素，而ng-if将从DOM中删除元素。我认为你在这里有一个错误是由于两个元素的ng-model指向同一个变量。

为什么不重复这么多代码而不是尝试使用ng-minlength中的表达式。

ng-minlength="$root.sessionObj.org.name==='orgName1' ? 12 : 4"

甚至更好地为组织提供ui州规则

ng-minlength="$root.sessionObj.org.minlength"
ng-maxlength="$root.sessionObj.org.maxlength"

我相信他们修正了ng-min max的表达式评估1.3

angularjs ng-show搞砸了表单验证

1 个答案: