javascript - AngularJS:我可以使 div/span 元素更改表单的 ng-valid 状态吗？

Question

我有一个表格。在该表单中，我有一个下拉列表，可将项目添加到模型中的数组中。在该数组的 ng-repeat 内部，有一个模型在被视为有效之前需要的要求列表，显示在 <span> 中。元素。使用 ng-class 运行的函数检查该列表，以便根据是否满足要求将要求显示为绿色或红色。当这些项目中的任何一项为红色时，我需要将表格视为无效。我尝试在 <span> 类中返回 ng-invalid元素以及设置颜色的类，但表单忽略了这一点。我该怎么做才能使这项工作成功？

Answer 1

您可以直接在 Controller 上访问验证变量。因此，您可以执行一个函数来验证任何修改并根据需要设置表单有效性。

一些代码示例: 如果输入为空，则表单应无效，但这可以通过复选框值覆盖。

angular.module('app', [])
.controller('ctrl', ctrl);

function ctrl($scope) {
  $scope.chkChange = function(value) {
    $scope.form.$valid = value;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
  <form name="form">
    <input name="input" ng-model="userType" required>
    <input type="checkbox" ng-model="chkbox" ng-change="chkChange(chkbox)">
  </form>
  <p>Form valid {{form.$valid}}</p>
</div>