在多个窗体中对控制器进行角度、必要的检查

Angular, required check on controller throughout multiple forms

本文关键字：检查 窗体 控制器      更新时间：2023-09-26

我正在尝试为所需输入类型的场景找到一个简单的解决方案。我有多个小表单，所有表单都通过一个按钮发送，保存在页面底部。我试图实现的是类似ngRequired的东西，但要跨越整个控制器，而不仅仅是单个表单。因此，所需的效果非常简单——如果没有填写任何输入，则将布尔值（或其他值）设置为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会很好，但不幸的是，它的结构方式不可能是一个大的形式。必须有一种更容易的方法来完成这项任务。

任何意见都将不胜感激，感谢阅读！！

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

所以，你需要把你的多个表单嵌套在一个根表单中

<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
 }
}]);

您可以使用myForm.$invalid指令，如下所述：当表单与AngularJS 无效时禁用提交按钮

相关文章：