Question

我正在尝试使用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，其中包含两个带有“required”标签的输入，如下所示，但无济于事：

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

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

Answer 1

ng-required 指令可以帮助您满足条件要求。

例如：

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

Answer 2

我在这种情况下使用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"

Answer 3

ng-disabled =“！user＆amp;＆amp;！email”

要求他们在其中一个字段中输入内容。

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

Answer 5

以下是我如何解决它，包括验证。当然，如果需要，可选择ng-pattern。谢谢你的这篇文章！

＆＃13;

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

＆＃13;

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

＆＃13;

Angularjs验证：要求列表中至少有一个输入

5 个答案: