javascript - Angular，需要通过多种形式检查 Controller

Question

我正在尝试为所需输入类型的场景找到一个简单的解决方案。我有多个小表格，它们都通过一个按钮发送，保存在页面底部。我想要完成的是 ngRequired 之类的东西，但是在整个 Controller 中，而不仅仅是单个表单。因此，所需的效果非常简单 - 如果未填写任何输入 - 将 bool 值(或其他内容)设置为 false 以禁用底部的保存按钮。

所以我的第一次尝试是这样的-

我对每个必需的项目都有一个模型 - 有 10 个项目

然后我有一个函数可以检查当你尝试点击按钮时有多少像这样被选中

if($scope.modeltracker1){
    //if there is anything inside model 1 add 1 to the tracker
    $scope.modeltracker += 1;
}

如果计数器不是10，什么都不做(所有必填项都没有填写)

if($scope.modeltracker != 10){
    //do nothing because all required are not filed out
}else{
    //run save, all required all filed out
 }

所以 - 我觉得应该有比我在这里的第一次尝试更简单的解决方案。也许类似于检查这些必填字段中的任何一个是否为假，不要开火？我知道 ngRequied 对此非常有用，但不幸的是，它的结构方式不能是一种大型形式。必须有一种更简单的方法来使用 Angular 完成这项任务。

任何输入将不胜感激，感谢阅读!!

Answer 1

您可以使用 ng-form嵌套您的多种形式。它允许使用嵌套表单并将多个表单作为一个表单进行验证。

因此，您需要将多个表单嵌套在一个根表单中。

<div ng-controller="demoController">
  <form name="parentForm">
    <ng-form name="firstForm">
      <input type="text" ng-model="firstModel" required>
    </ng-form>
    <ng-form name="secondForm">
      <input type="text" ng-model="secondModel" required>
    </ng-form>
  </form>
</div>

然后，您需要做的就是检查父表单的验证状态。

 angular.module('formDemo', [])
.controller('demoController', ['$scope', function($scope) {

 if($scope.parentForm.$valid) {
    //run save, all required all filed out
 } else {
   //do nothing because all required are not filed out
 }
}]);