angularjs – Atleast one字段在表单中是必需的：Angular中的表

发布时间：2020-12-17 17:27:04 所属栏目：安全来源：网络整理

导读：我在表单上有三个输入字段. 我正在寻找一种方式,如果需要任何一个或任何组合的输入,表格是有效的,这意味着至少有一个是必要的.也可以用任何组合输入输入,即使这样,表格也是有效的. 我已阅读ng-required但这会让我的表达太长. tdName/tdtdinput type="text" c

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

我已阅读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)”.但是当我提交我的表单时,在我的名字字段中会显示一个内置的弹出式弹出窗口,上面写着“请填写此必填字段”,因为无论何时形式.$valid在空表单上调用,字段将首先被检查然后弹出up将显示在该字段上.但对于用户来说,似乎第一场是强制性的,但事实并非如此.

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

解决方法

我编辑了你的代码检查你的代码…检查小提琴链接 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!