angularjs ng-show 搞砸了表单验证

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 以识别我的第二个组织时.. 我对 org # 1 的第一个组织表单验证不正确。该表单仅在输入为 12 个字符时才会抱怨。我需要它是相反的。通过添加第二个 ng-show 有什么想法我做错了吗？我在尝试识别组织时尝试使用 ng-if，并且在表单验证中效果很好。但是这将我的 vmHostPrefix 变量解析为我的控制器中的未定义。任何帮助表示赞赏！

Answer 1

ng-show 隐藏带有 display: none 的元素，而 ng-if 将从 DOM 中删除元素。我认为您在这里遇到的错误是由于 ng-model 的 2 个元素指向同一个变量而导致的。

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

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

或者更好的是为 org 设置 ui 状态规则

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

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