Question

当使用angular＆＃39; s（1.5）表单支持时，我希望当禁用某个字段时，不应将其标记为无效，因为用户无法更改该值。

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

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

与显示验证消息和提交表单一起构成了UX的问题，并且可以灵活地使用角度验证来确定表单的状态，以及是否可以提交表单＃34; （将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}}

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

所示

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

ng-disabled和表单验证

2 个答案: