2016-02-11 54 views
0

我对此是依赖于用户是什么样的组织下输入领域的angularjs观点..angularjs NG-节目打乱了表单验证

<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> 

我需要做的是确定哪些组织用户目前处于,并且依赖于org,主机名前缀的输入字段只能是一定的长度。现在,当我在我的代码中只显示第一个ng表示时,这很好。如果输入少于或多于12个字符,它会正确识别组织名称和表格。每当我添加我的第二个ng-show来识别我的第二个组织时,我的第一个组织表单验证组织表单1是不正确的。如果输入是12个字符,表单只会投诉。我需要它是相反的。任何想法,我做错了,加入这第二个ng-show?我尝试使用NG - 如果当试图识别组织,并与表单验证工作正常..但解决我的vmHostPrefix变量未定义在我的控制器。任何帮助表示赞赏!

回答

0

ng-show使用display:none隐藏元素,而ng-if将元素从DOM中移除。我认为你在这里有一个由ng-model指向同一个变量的2个元素引起的错误。

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

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

甚至有更好的组织

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

UI状态规则我相信他们定的表达式求值的NG-最小最大130

+0

感谢您的答复!我尝试在ng-minlength中添加一个表达式,但它不起作用。它仍然在做与以前一样的事情,不知道发生了什么事。 @ CS-NET – Samantha