表单中至少有一个字段是必填字段：Angular 中的表单验证答案

【问题标题】：Atleast one field is mandatory in form: Form Validation in Angular表单中至少有一个字段是必填字段：Angular 中的表单验证
【发布时间】：2017-02-07 10:08:59
【问题描述】：

我在一个表单上有三个输入字段。我正在寻找一种方式，如果需要输入中的一个或任何组合，则表单有效，这意味着至少需要一个。即使这样，用户也可以输入任何组合的输入，表单也是有效的。

我已经阅读了 ng-required 但这会让我的表达太长。

<td>Name</td>
<td><input type="text" class="form-control input-xs" name="name"
     ng-model="ctrl.orderSearch.name" minlength="4">
</td>
<td>Class</td>
<td><input type="text" class="form-control input-xs" name="class"
     ng-model="ctrl.orderSearch.Class" minlength="6">
</td>
<td>Roll No:</td>
<td><input type="text" class="form-control input-xs" name="rollNo"
     ng-model="ctrl.orderSearch.RollNo" minlength="6">
</td>

更新：我不想禁用提交按钮。该表单在以下任一情况下均有效：

1)字段一或二或三已填满

2) 1,2 或 1,3 或 2,3 已填充

3) 1,2,3 已填满。

另外，我尝试使用： ng-required="!(ctrl.orderSearch.name.length || ctrl.orderSearch.rollNo.length )" 字段。但是，当我提交表单时，我的姓名字段上会显示一个内置的 angular 弹出窗口，上面写着“请填写此必填字段”，因为每当在空表单上调用 form.$valid 时，将首先检查字段一个并因此弹出up 将显示在该字段上。但对用户来说，字段一似乎是强制性的，但事实并非如此。

另外，我不想编写自定义方法进行验证。是否可以使用 ng-required？请帮忙。

【问题讨论】：

请正确格式化您的代码
毫无疑问，我是 Angular js 的新手。
你可以在表单元素中使用 novalidate。
我用了 Ctrl+K ，它的格式只是这样。
你能创建你的代码的小提琴吗..

标签： angularjs forms validation

【解决方案1】：

下面是它将在表单提交事件中验证的代码。它会在您提交表单时进行限制，并且您的表单包含所有空字段。

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) { 

   $scope.isOneFieldRequired = function (name,uclass,rollNo) {
        return !(name|| uclass|| rollNo);
};
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
             <input type="text" ng-model="name" name="name" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
            <br/>
            <input type="text" ng-model="uclass" name="uclass" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
            <br/>
            <input type="text" ng-model="rollNo" name="rollNo" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
            <br/>
            <button type="submit"> Submit</button>
        </form>
        </div>
        </body>
    </html>

【讨论】：

【解决方案2】：

查看link

HTML

<form name="myForm">
            <input type="text" ng-model="fields.one" name="firstField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
            <br/>
            <input type="text" name="secondField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" ng-model="fields.two" />
            <br/>
            <input type="text" ng-model="fields.three" name="thirdField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
            <br/>
            <button type="submit" ng-disabled="!myForm.$valid">Submit</button>
            <br/>
            <div>
                <p>Submitted ? <span ng-bind="fields.submitted"></span>

                </p>
                <p>Form $valid: <span ng-bind="myForm.$valid"></span>

                </p>
            </div>
        </form>

angular.module("myApp", [])
    .controller('myCtrl', ['$scope', function ($scope) {
    $scope.fields = {
        one: '',
        two: '',
        three: '',
        submitted: 'Not Yet'
    };

    $scope.submit = function () {
        $scope.fields.submitted = "Yahooo";
    }
}]);

【讨论】：

谢谢，你的 ng-required 表达帮助了我。
简单但有效，谢谢

【解决方案3】：

我已经编辑了你的代码检查你的代码...检查小提琴链接Fiddle 希望这能帮助您理解验证..

<div ng-app ng-controller="myCtrl">
   <table ng-form="checkForm">
      <tr>
         <td>Name</td>
         <td>
            <input type="text" class="form-control input-xs" required  name="name"
               ng-model="ctrl.orderSearch.name" minlength="4" >

         </td>
         <td>
           <div ng-show="checkForm.name.$invalid">
               name error
            </div>
         </td>
      </tr>
      <tr>
         <td>Class</td>
         <td>
            <input type="text" class="form-control input-xs" required name="class"
               ng-model="ctrl.orderSearch.Class"  minlength="6" >

         </td>
         <td>
           <div ng-show="checkForm.class.$invalid">
               class error
            </div>
         </td>
      </tr>
      <tr>
         <td>Roll No:</td>
         <td>
            <input type="text" class="form-control input-xs"  required name="rollNo"
               ng-model="ctrl.orderSearch.RollNo"  minlength="6" >

         </td>
         <td>
           <div ng-show="checkForm.rollNo.$invalid">
               Roll no error
            </div>
         </td>
      </tr>
      <tr>
        <td colspan="3" style="font-weight:bold; color:green">
          <span ng-show="checkForm.name.$valid || checkForm.class.$valid || checkForm.rollNo.$valid">Valid Form</span>
        </td>
      </tr>
   </table>
</div>

【讨论】：

这将如何帮助解决我的问题？请解释
基本上你的问题是什么 shweta...我已经解释了验证部分..您可以根据您的要求添加或删除。
jsfiddle.net/fA968/256 为您创建了小提琴...添加了保存按钮，如果所有 3 个字段都无效，该按钮将被禁用，如果 3 个字段中的任何一个有效，则该按钮将有效... Ab dekh lo shayad kuch kaam aaye
我不想禁用提交按钮

【解决方案4】：

您可以创建一个$scope 变量来执行“需要检查的一个或所有字段”。 $scope 变量将成为表单有效与否的标志。

示例：
控制器

function SampleController(){
    $scope.isValidForm = function(){ 
      //do the checking here.
      //return true or false
    }
}

查看：

<button ng-disabled="!isValidForm()">Submit</button>

【讨论】：

实际上，我不想写一个方法或者只是不想禁用提交按钮。
您可以将 ng-disabled="checkForm.name.$invalid && checkForm.class.$invalid && checkForm.rollNo.$invalid" 添加到您的按钮元素
如果您不想禁用该按钮，由您决定。这只是一个指导您的示例。