Html AngularJS：防止隐藏表单字段被验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19114467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: Prevent hidden form fields being validated
提问by siva636
What is the best way of preventing hidden form fields being validated in AngularJS?
防止在 AngularJS 中验证隐藏表单字段的最佳方法是什么？
回答by siva636
I initially missed the built-in ngRequireddirective. There is a requiredtag as well, which confused me.
我最初错过了内置ngRequired指令。还有一个required标签，这让我很困惑。
Now, we can use the same logic (which we used to hide the element) to set the ngRequiredfalse.
现在，我们可以使用相同的逻辑（我们用来隐藏元素）来设置ngRequiredfalse。
Here is an example practical usecase: I want to ask married people the number of children they have, but, if they are not married, simply hide the field about children.
这是一个实际用例示例：我想询问已婚人士他们有多少个孩子，但是，如果他们未婚，只需隐藏有关孩子的字段。
<form ng-app name="form">
Marital status:
<select ng-model="maritalStatus" required>
<option value="">Select...</option>
<option value="M">Married</option>
<option value="UM">Unmarried</option>
</select>
<div ng-show="maritalStatus == 'M'">
Number of children: <input type="number" ng-model="children" ng-required="maritalStatus == 'M'">
</div>
(for testing) Is this form correctly filled? {{form.$valid}}
</form>
回答by SoEzPz
You may also completely add or remove it from the DOM/form by using ng-if instead of ng-show.
你也可以通过使用 ng-if 而不是 ng-show 从 DOM/表单中完全添加或删除它。
<div ng-show="maritalStatus === 'M'">
Number of children: <input type="number" ng-model="children" ng-required="maritalStatus == 'M'">
</div>
to this
对此
<div ng-if="maritalStatus === 'M'">
Number of children: <input type="number" ng-model="children" ng-required="true">
</div>
回答by Maxim Shoustin
You can remove requiredattribute by using directives:
您可以required使用指令删除属性：
<div ng-app="myApp">
<input type="backbutton" id="firstName" name="firstName" type="text" required/>
var app = angular.module('myApp',[]);
app.directive('input',function($compile){
return {
restrict:'E',
compile:function($tElement,$tAttrs){
console.log("hi there");
var el = $tElement[0];
if(el.getAttribute('type')){
el.removeAttribute('type');
el.setAttribute($tAttrs.type,'');
return function(scope){
$compile(el)(scope);
}
}
}
}
});
app.directive('remove',function($compile){
return {
restrict: 'A',
replace:true,
template:'',
link: function (scope, element, attrs) {
element.removeAttr('required');
}
}
});
See Fidlle here
Before:
前：
<input id="firstName" name="firstName" required="" remove="" class="ng-scope">
After:
后：
<input id="firstName" name="firstName" remove="" class="ng-scope">
