AngularJS：防止验证隐藏的表单字段

Posted 2023-03-05

【中文标题】AngularJS：防止验证隐藏的表单字段

【英文标题】：AngularJS: Prevent hidden form fields being validated

【发布时间】：2013-10-07 12:16:30

【问题描述】：

防止隐藏表单字段在 AngularJS 中验证的最佳方法是什么？

【问题讨论】：

所以当你隐藏它时可能只是删除它的required 属性？

如果您有代码，请发布它以帮助我们，有足够的选项来实现您的逻辑，但请确保不要从头开始，而只是更改您的代码。 Fiddle/PLunker 会很棒

有人回答你的问题吗？许多人只是给你一个选项来禁用所需的验证，但没有任何其他的......比如，数字......或者我错过了什么？

【参考方案1】：

您可以使用指令删除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');
      
  
);

见Fidlle here

之前：

<input id="firstName" name="firstName" required="" remove="" class="ng-scope">

之后：

<input id="firstName" name="firstName" remove="" class="ng-scope">

【讨论】：

小提琴什么都不做！？

它从input 中删除required。您可以调试它并检查启动时是否有 ``required`。

啊，好吧，抱歉没注意到。

【参考方案2】：

我最初错过了内置的ngRequired 指令。还有一个required 标签，这让我很困惑。

现在，我们可以使用相同的逻辑（用于隐藏元素）将ngRequired 设置为false。

这是一个实际用例示例：我想询问已婚人士他们有多少孩子，但是，如果他们没有结婚，只需隐藏关于孩子的字段。

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

【讨论】：

这很容易，谢谢。我有一个阻止主表单有效的子表单，因为子表单（不可见）有一个包含 ng-required="true" 指令的文本字段。现在一切正常！

这完全可行；请注意， ng-if 创建了一个隔离范围...如果您不考虑这一点，可能会导致一些不良影响。

这里有一个情况 - 首先我选择 Married 并输入号码。的孩子，后来选择未婚。现在，当我提交表单时，children 值也被提交了。如何防止提交 children's 的值？

对 required 属性感到困惑并使用 required="expression" 而不是使用 ng-required="expression"。谢谢@siva636

【参考方案3】：

您也可以使用 ng-if 代替 ng-show，从 DOM/表单中完全添加或删除它。

<div ng-show="maritalStatus === 'M'">
    Number of children: <input type="number" ng-model="children"  ng-required="maritalStatus == 'M'">
</div>

到这里

<div ng-if="maritalStatus === 'M'">
    Number of children: <input type="number" ng-model="children"  ng-required="true">
</div>

【讨论】：

ng-if 如果您想避免对多个元素进行验证，或者当您的验证比检查元素是否不为空更复杂时，它的效果很好。这是假设您也想隐藏元素。

所以基本上你正在删除所有内容，甚至是用户输入？？

整个 div 和这个地方的内容，但你也可以在输入上使用 ng-if 并跳过 div。