Question

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

我已阅读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 =＆＃34;！（ctrl.orderSearch.name.length || ctrl.orderSearch.rollNo.length）＆＃34;在田野上。但是当我提交我的表格时，在我的名字字段中会显示一个内置的棱角分明弹出来说＆＃34;请填写此必填字段＆＃34;因为无论什么形式。$ valid在空表单上调用，首先检查字段1，因此弹出将显示在该字段上。但对于用户来说，似乎第一场是强制性的，但事实并非如此。

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

Answer 1

选中此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>

的js

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

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

Answer 2

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

例如：
的控制器

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

查看：

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

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

Answer 4

下面是它将在表单提交事件中验证的代码。它将在您提交表单时受到限制，并且您的表单中的所有字段为空。

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

至少一个字段在表单中是必需的：Angular中的表单验证

4 个答案: