ng禁用不能正常工作

我已經創建了一個指令，允許選項卡進入文本字段，它也是必需的。問題是錯誤顯示/隱藏正確，但即使表單無效，按鈕也沒有被禁用。檢查JS小提琴這裏http://jsfiddle.net/c5omqx4t/3/ng禁用不能正常工作

重現步驟：

1) Select input box 
2) Press Tab key 
3) Press Backspace key 
issue: Error is still here but the button is enabled

下面是HTML代碼

<div ng-controller="helloController"> 
     <h1>{{hello}}</h1> 
     <form name="createForm"> 
      <div ng-if="providerMediumType != 'XML_API'"> 
      <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" /> 
      <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>  
     </div> 
      <input type="button" ng-disabled="createForm.$invalid" value="Go" /> 
     </form> 
    </div>

來源

2015-05-04 coure2011

希望你注意到，即使在退格時它仍然是「假」，你按下'createForm。$ invalid'的時刻也變爲'false'。 –

解決方案1：

只需使用ng-show代替ng-if。因爲ng-if在這裏創建一個新的範圍。

<div ng-controller="helloController"> 
     <h1>{{hello}}</h1> 
     <form name="createForm"> 
      <div ng-show="providerMediumType != 'XML_API'"> 
      <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" /> 
      <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>  
     </div> 
      <input type="button" ng-disabled="createForm.$invalid" value="Go" /> 
     </form> 
    </div>

Demo link

解決方案2：

或只是拉輸入轉場到裏面DIV標籤

Demo link2

<div ng-controller="helloController"> 
     <h1>{{hello}}</h1> 
     <form name="createForm"> 
      <div ng-if="providerMediumType != 'XML_API'"> 
      <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" /> 
      <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p> 
      <input type="button" ng-disabled="createForm.$invalid" value="Go" /> 
     </div> 

     </form> 
    </div>

解決方案3：

使用controller as語法來實現此目的。 helloController中的小改動。請注意，this.providerMediumType而不是$scope.providerMediumType。

<body ng-app="HelloApp"> 
    <div ng-controller="helloController as vm"> 
     <h1>{{hello}}</h1> 
     <form name="createForm" method="POST" action="/form.php"> 
      <div ng-if="vm.providerMediumType != 'XML_API'"> 
      <input name="cSep" ng-model="vm.cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" /> 
      <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>  

     </div> 
      <input type="submit" ng-disabled="createForm.$invalid" value="Go" /> 

     </form> 
    </div> 
</body> 



angular.module('HelloApp', ['components']).controller('helloController',helloController); 

function helloController($scope) { 
    $scope.hello = 'Hello Me!'; 
    this.providerMediumType = 'XML_API';  
}

Demo with ng-if

來源

2015-05-04 09:04:41

對不起，但不能用ng-show代替ng-if！否則，在提交表單時，所有隱藏的輸入也會發布。任何其他解決方案？ – coure2011

更新的答案可以請您檢查。 –

找到了解決辦法。在指令中使用c。$ apply（）而不是c。$ digest（）

來源

2015-05-04 10:39:00 coure2011

ng禁用不能正常工作

回答

相關問題