ng-disabled 和表单验证答案

【问题标题】：ng-disabled and form validationng-disabled 和表单验证
【发布时间】：2016-03-21 10:35:31
【问题描述】：

当使用 angular 的 (1.5) 表单支持时，我希望当一个字段被禁用时，它不应该被标记为无效，因为用户不可能更改值。

但是，如下面的plunker所示，需要一个字段，但可以通过复选框从启用切换到禁用，反之亦然，表单验证结果没有改变，整个表单仍然无效，虽然如果该字段被禁用，则无法更改值。

http://plnkr.co/edit/OMZkoPgPZcHjO67JF88c?p=preview

连同显示验证消息和提交表单，这在 UX 和使用角度验证来确定表单状态以及是否可以“提交”（将 AJAX 发送到服务器）的灵活性方面带来了问题。

（下面的代码在plunker里，我只是贴在这里，因为链接plunker时需要代码）

<form name="vm.form" novalidate>
  <input ng-model="vm.model" ng-disabled="vm.disabled" required />
  <label><input type="checkbox" ng-model="vm.disabled" />Disable field</label>
</form>
Form is invalid: {{vm.form.$invalid}}

【问题讨论】：

使用$dirty可以检查字段是否被编辑
如果 ng-disabled 是动态的，那没关系，想象一下：用户编辑该字段，然后他选择了一些其他选项使该字段被禁用，因此它在同时，除了禁用之外，它仍然使整个表单无效
所以你要问的是，当你禁用字段 angularJS 时不应该验证它？？
它应该将表单标记为有效？
是的，对我来说这是一个合理的行为，因为当它被禁用时，用户不可能更改该字段。那么为什么要验证，为什么用户不能提交表单，为什么要出现验证消息...

标签： angularjs

【解决方案1】：

好吧，在这里您通常不会像提交按钮一样在字段上执行 ng-disabled，如图所示：

  <input ng-model="vm.model" ng-minlength="4" ng-required="true"/>
  <label><input type="checkbox" ng-model="vm.disabled" ng-required="true"/>Disable field</label>
  <br><input type="submit" ng-disabled="vm.form.$invalid"/>
</form>
Form is invalid: {{vm.form.$invalid}}
</body>
</html>

现在，如果您尝试此操作，它将正常工作，如 Plunker 所示。

【讨论】：

这只是显示问题的最简单示例。最重要的是，业务分析和设计人员需要禁用字段。想象一个更大的表单，其中有许多字段和许多条件会影响表单的可提交性。
是的，请您张贴那个“大”表格，以便我可以帮助您@redhead。我知道的远不止这些..
好吧，我们正在使用 angular-formly 库来生成表单，但这确实是 angular 的问题，所以我就这样发布了。此外，我们还有一种在整个应用程序中使用的自定义框架，因此我们不会重复代码。框架在 $valid=true 时提交表单，但这个问题完全禁用了它。我认为这更像是一个角度设计问题。

【解决方案2】：

您可以根据复选框值是否选中来操作 ng-required 值的值

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Asd as vm">
    <form name="vm.form" novalidate>

      <input ng-model="vm.model" ng-disabled="vm.checkbox" ng-required="vm.checkbox===false" />
      <label><input type="checkbox" ng-model="vm.checkbox" />Disable field</label>
    <input  ng-model="vm.other" required/>
    </form>
    Form is invalid: {{vm.form.$invalid}}

  </body>

</html>

【讨论】：