Question

我想以角度方式对表单进行验证。我有三个输入框。当输入其中一个时，所有三个都是必需的。否则他们不是必需的。只有在输入或不输入所有三个按钮时，才能启用“继续”按钮。

您可以查看this plunker上的代码。这里也是一个片段，以防万一，以防不方便：

＆＃13;

angular.module('test', []).config(function() {});

angular.module('test').controller('testctrl', function($rootScope, $scope, $location) {
  $scope.admin = [{
    "number": "2"
  }];
  $scope.adminInfos = {};
  $scope.validations = {};
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="test_form">
  <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span>
  <br/>
  <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].email.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length ||  adminInfos[admin.number].firstname.length ) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span>
  <br/>
  <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].lastname.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span>

  <br/>
  <br/>

  <button ng-disabled="test_form.$invalid">Continue</button>

</form>

＆＃13;

如果我输入第一个名字并将姓氏和电子邮件保留为空白，我的问题仍然是仍然启用了“继续”按钮。

如果未输入所有三个或输入全部三个，则必须启用

继续按钮。

Answer 1

您的ng-required条件有误，请更改您要求使用的ng条件或（||）而不是&所有字段

 ng-required="adminInfos[admin.number].lastname.length || adminInfos[admin.number].email.length"

检查此plunker，它有效..

Answer 2

你有一个逻辑缺陷。 ng-required应为或（||）not和（＆amp;＆amp;）。见下面的分叉。

Plunkr

<input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" />

请注意，请将此复杂的UI逻辑放在控制器上的方法中：）

Answer 3

您不需要执行必需的操作，只需简单地将其替换为“必需”＆＃39;表明有必要使表格有效。见下文：

<!DOCTYPE html>
<html ng-app="test">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="testctrl">
  <form name="test_form">
    <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" required />
    <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span>
    <br/>
    <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" required />
    <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length ||  adminInfos[admin.number].firstname.length ) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span>
    <br/>
    <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" required />
    <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span>

    <br/>
    <br/>

    <button ng-disabled="test_form.$invalid">Continue</button>

  </form>
</body>

</html>

使用angularjs进行表单验证

3 个答案: