【问题标题】:Angularjs Validation: Require at least one input from a listAngularjs验证:需要列表中的至少一个输入
【发布时间】:2015-06-11 18:32:32
【问题描述】:

我正在尝试使用 Angularjs 验证来在列表中至少有一个输入被填写时启用按钮。我正在处理的内容类似于以下 w3schools 示例:

<head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
    <h2>Validation Example</h2>

    <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

        <p>Username:<br>
        <input type="text" name="user" ng-model="user" required>
        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.required">Username is required.</span>
        </span>
        </p>

        <p>Email:<br>
        <input type="email" name="email" ng-model="email" required>
        <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
        <span ng-show="myForm.email.$error.required">Email is required.</span>
        <span ng-show="myForm.email.$error.email">Invalid email address.</span>
        </span>
        </p>

        <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid>"
        </p>

    </form>

    <script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function($scope) {
            $scope.user = 'John Doe';
            $scope.email = 'john.doe@gmail.com';
        });
    </script>

</body>

我尝试添加一个 div,其中包含两个带有“必需”标签的输入,如下所示,但无济于事:

<div name="address" ng-model="address" required>
<input name="address1" ng-model="address1">
<input name="address2" ng-model="address2">

使用角度验证执行此操作的最佳方法是什么?

【问题讨论】:

标签: javascript html angularjs validation


【解决方案1】:

要求他们在以下任一字段中输入内容:

ng-disabled="!user && !email"

【讨论】:

    【解决方案2】:

    ng-required 指令可以帮助您满足类似的条件需求需求。

    例如:

    <div name="addresses">
      <input name="address1" ng-model="address1" ng-required="!address2">
      <input name="address2" ng-model="address2" ng-required="!address1">
    </div>
    

    【讨论】:

    • 这不适用于所有情况,特别是当复选框选中和取消选中时,模块不会同时更改
    【解决方案3】:

    在这种情况下我会使用ng-required

    <input ng-required="mustBeFilled()" ng-model="myModel" />
    <input ng-required="mustBeFilled()" ng-model="myOtherModel" />
    

    然后

    $scope.mustBeFilled = function () {
      if($scope.myModel.length || $scope.otherModel.length){
        return false
      } else {
        return true
      }
    }
    

    所以只要一个输入被填满,就不需要输入,使用 require 可以让您控制一些功能,例如使用表单中的类来显示消息

    对于提交按钮,您可以添加

    ng-disabled="formName.$invalid"
    

    【讨论】:

      【解决方案4】:

      试试下面的代码。 Working Plunker

       <div ng-controller="ExampleController">
        <form name="userForm" novalidate > 
          Name:
          <input type="text" name='userName' ng-model="firstName" required />
        </form>
      
        <input type = 'button' id="buttonId"  value = 'Submit'  ng-disabled="!userForm.userName.$dirty"/>
      </div>
      

      【讨论】:

        【解决方案5】:

        这是我解决它的方法,包括验证。当然,如果需要,ng-pattern 是可选的。感谢您的这篇文章!

        var myApp = angular.module('myApp', []);
        
        myApp.controller('MainController', ['$scope',
          function($scope) {
            $scope.checkSubmit = function() {
              if ($scope.myform.$valid) {
                //should also be valid if only one number is available
                alert('form is valid...');
              }
            }
          }
        ]);
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <html>
        
        <head>
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        </head>
        
        <body ng-app="myApp">
        
          <div class="container-fluid" ng-controller="MainController">
            <form name="myform" ng-submit="checkSubmit()" novalidate>
              <!-- mobile -->
              <div class="form-group" ng-class="{'has-error': (myform.$submitted && myform.mobile.$invalid) || (myform.mobile.$invalid && !myform.mobile.$pristine)}">
                <label class="col-sm-2 control-label" for="mobile">Mobile: *</label>
                <div class="col-xs-12">
                  <input ng-required="!data.home" id="mobile" name="mobile" type="tel" class="form-control" ng-model="data.mobile">
                </div>
              </div>
        
              <!-- home -->
              <div class="form-group" ng-class="{'has-error': (myform.$submitted && myform.home.$invalid) || (myform.home.$invalid && !myform.home.$pristine)}">
                <label class="col-sm-2 control-label" for="home">Home: *</label>
                <div class="col-xs-12">
                  <input ng-required="!data.mobile" id="home" name="home" type="tel" class="form-control" ng-model="data.home">
                  <div ng-class="{'has-error': ((myform.$submitted && myform.mobile.$invalid) || (myform.mobile.$invalid && !myform.mobile.$pristine)) || ((myform.$submitted && myform.home.$invalid) || (myform.home.$invalid && !myform.home.$pristine))}">
                    <span class="help-block">Please enter at least one phone number.</span>
                  </div>
                </div>
              </div>
        
              <!-- Button (Double) -->
              <div class="form-group">
                <div class="col-xs-12 buttons">
                  <button id="button" type="submit" name="button" class="btn btn-info">Submit</button>
                </div>
              </div>
        
            </form>
        
            <!-- info -->
            <div class="row">
              <div class="col-xs-12">
                <br/>Mobile -> {{myform.mobile.$valid}} - {{myform.mobile.$error}}
                <br/>Home -> {{myform.mobile.$valid}} - {{myform.mobile.$error}}
              </div>
            </div>
          </div>
        </body>

        【讨论】:

          猜你喜欢
          • 2011-07-21
          • 1970-01-01
          • 2015-05-28
          • 2014-06-17
          • 1970-01-01
          • 2018-04-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多