Question

我有多个input字段，我想验证我的fields。当用户单击submit按钮时，它们不能为空。如果字段为空，当用户单击按钮时，我将如何显示border red。

这是我的代码 http://plnkr.co/edit/XtnSdO9ARpHdn9RZotMt?p=info

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [
    {
      name:'abc'
    },
    {
      name:'pqr'
    }
    ];

    $scope.onclick =function(){

      console.log($scope.c)
    }

});

Answer 1

首先，您需要将所有输入字段放在form标签内。像这样：

<form ng-submit="onclick()">
  <button type="submit">submit</button>
  <li ng-repeat="x in c">
    <input type="text" ng-model='x.name' value="{{x.name=='abc'?'ddd':'hhh'}}" required="true"/>
   </li>
</form>

对于输入，您需要设置属性required =“ true”（如果需要条件值，则需要设置angular的ng值）。 Sumbit按钮需要具有type =“ submit”（因此他触发表单提交）。提交功能需要从单击按钮移到表单的属性ng-submit =“ onclick（）”。

该示例已经可以使用本地html5验证消息。如果要添加自定义样式，则无效的输入将带有CSS类（“ ng-invalid”）。

Answer 2

最好在您的字段上使用required属性。但是您可以使用指令进行手动验证。您只需要将输入内容包装在<form>中即可。该指令可以扩展为执行所需的任何验证。这是一个示例：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [{
    name: 'abc'
  }, {
    name: 'pqr'
  }];

  $scope.onclick = function() {
    console.log($scope.c)
  }
});

app.directive("emptyValidator", function($q, $timeout) {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {

      ctrl.$validators.empty = function(modelValue, viewValue) {
        if (!ctrl.$isEmpty(modelValue)) {
          return true;
        }
        return false;
      }
    }
  };
});

.red-border {
  border: 2px solid red;
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <form name="formName" ng-submit="onclick()">
      <p>Hello {{name}}!</p>
      <button type="submit">submit</button>

      <ul>
        <li ng-repeat="x in c">
          <ng-form name="innerForm">
            <input type="text" name="inputName" ng-model='x.name' empty-validator ng-class="{'red-border' : innerForm.inputName.$error.empty}" />
          </ng-form>
        </li>
      </ul>

    </form>

  </div>

</body>

</html>

但是，您通过单击按钮就请求了一个奇怪的请求来对其进行验证，因此您可能希望在函数本身中进行此操作。这不是验证它的正确方法，但仍然可以完成。这是一个示例：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [{
    name: 'abc'
  }, {
    name: 'pqr'
  }];
  $scope.d = [false, false];

  $scope.onclick = function() {
    var f = false;
    for (var i = 0; i < $scope.c.length; i++) {
      if (!$scope.c[i].name) {
        $scope.d[i] = true;
        f = true;
      } else {
        $scope.d[i] = false;
      }
    }
    if (f) {
      return false;
    }
    console.log($scope.c)
  }
});

.red-border {
  border: 2px solid red;
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <form ng-submit="onclick()">
      <p>Hello {{name}}!</p>
      <button type="submit">submit</button>

      <ul>
        <li ng-repeat="x in c">
          <input type="text" ng-model='x.name' ng-class="{'red-border' : d[$index]}" />
        </li>
      </ul>

    </form>

  </div>

</body>

</html>

如何验证angular js中的字段（非空白）

2 个答案: