NG-残疾不能正常工作 [英] ng-disabled not working properly
本文介绍了NG-残疾不能正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个指令，让标签的文本字段，它也是必需的。问题是错误显示/隐藏正确但按钮是没有得到，甚至禁用的形式是无效的。这里检查JS小提琴 http://jsfiddle.net/c5omqx4t/3/
重现步骤：
1）选择输入框
2）preSS Tab键
3）preSS Backspace键
问题：错误是还在这里，但按钮被激活
下面是HTML code
＆LT; DIV NG控制器=HelloController中＆GT;
＆LT; H1＆GT; {{你好}}＆LT; / H1＆GT;
＆LT;表格名称=的CreateForm＆GT;
＆LT; DIV NG-IF =providerMediumType ='XML_API'！＆GT;
＆LT;输入名称=CSEPNG模型=CSEP类型=文本级=表格控允许标签要求NG-MAXLENGTH =10/＆GT;
＆LT; p NG秀=$ createForm.cSep无效和放大器;＆安培;！createForm.cSep $质朴。阶级=错误＆GT;要求（1-10个字符）列分隔符＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT;输入类型=按钮NG-禁用=$的CreateForm无效值=转到/＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
解决方案
解决方案1：
只要使用 NG-节目而不是的NG-如果。由于NG-如果在这里创建一个新的范围。
＆LT; DIV NG控制器=HelloController中＆GT;
＆LT; H1＆GT; {{你好}}＆LT; / H1＆GT;
＆LT;表格名称=的CreateForm＆GT;
＆LT; DIV NG秀=！providerMediumType ='XML_API'＆GT;
＆LT;输入名称=CSEPNG模型=CSEP类型=文本级=表格控允许标签要求NG-MAXLENGTH =10/＆GT;
＆LT; p NG秀=$ createForm.cSep无效和放大器;＆安培;！createForm.cSep $质朴。阶级=错误＆GT;要求（1-10个字符）列分隔符＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT;输入类型=按钮NG-禁用=$的CreateForm无效值=转到/＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
解决方案2：
或只是拉输入转场到里面DIV标签
＆LT; DIV NG控制器=HelloController中＆GT;
＆LT; H1＆GT; {{你好}}＆LT; / H1＆GT;
＆LT;表格名称=的CreateForm＆GT;
＆LT; DIV NG-IF =providerMediumType ='XML_API'！＆GT;
＆LT;输入名称=CSEPNG模型=CSEP类型=文本级=表格控允许标签要求NG-MAXLENGTH =10/＆GT;
＆LT; p NG秀=$ createForm.cSep无效和放大器;＆安培;！createForm.cSep $质朴。阶级=错误＆GT;要求（1-10个字符）列分隔符＆LT; / P＆GT;
＆LT;输入类型=按钮NG-禁用=$的CreateForm无效值=转到/＆GT;
＆LT; / DIV＆GT; ＆LT; /表及GT;
＆LT; / DIV＆GT;
解决方案3：
使用控制器语法来达致这。还小的变化在HelloController中。需要注意的是 this.providerMediumType 而不是 $ scope.providerMediumType 的。
＆LT;机身NG-应用=HELLOAPP＆GT;
＆LT; DIV NG控制器=HelloController中为VM＆GT;
＆LT; H1＆GT; {{你好}}＆LT; / H1＆GT;
＆LT;表格名称=的CreateForm方法=POSTACTION =/ form.php的＆GT;
＆LT; DIV NG-IF =vm.providerMediumType ='XML_API'！＆GT;
＆LT;输入名称=CSEPNG模型=vm.cSep类型=文本级=表格控允许标签要求NG-MAXLENGTH =10/＆GT;
＆LT; p NG秀=$ createForm.cSep无效和放大器;＆安培;！createForm.cSep $质朴。阶级=错误＆GT;要求（1-10个字符）列分隔符＆LT; / P＆GT; ＆LT; / DIV＆GT;
＆LT;输入类型=提交NG-禁用=$的CreateForm无效。VALUE =转到/＆GT; ＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;angular.module（'HELLOAPP'，['组件']）控制器（'HelloController中'，HelloController而言）。功能HelloController中（$范围）{
$ scope.hello ='你好我！;
this.providerMediumType ='XML_API';
}
I have created a directive to allow tab into a text field, Its also required. The problem is error is showing/hiding correctly but the button is not getting disabled even the form is invalid. Check the js fiddle here http://jsfiddle.net/c5omqx4t/3/
Steps to reproduce:
1) Select input box
2) Press Tab key
3) Press Backspace key
issue: Error is still here but the button is enabled
here is the html code
<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>
解决方案
Solution 1:
Just use ng-show instead of ng-if. Because ng-if create a new scope here.
<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>
Solution 2:
or just pull input go field into inside DIV tags
<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>
Solution 3:
Use controller as syntax to acheive this. Also small changes in helloController. Note that this.providerMediumType instead of $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';
}
这篇关于NG-残疾不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
