如何在AngularJS中检查所有字段是否为空

Question

如何在controller.js中检查ng-submit="submit(field)"中的所有字段是否为空？它们包括几个文本框和一个选择字段。

如果所有字段都为空且未选择选择选项，则希望出现警报框，而不是单独进行验证。

谢谢。

- davidlee

Answer 1

虽然不完全符合您的要求，但也许$pristine是您想要的？它是表单上的一个标志，指示表单是否曾经被编辑过。如果有人输入并清除了一个字段，$pristine仍将为false。

<form name="myform" ng-submit="doSubmit()" ng-controller="FormController">
    <input ng-model="firstName" name="firstName" />

</form>

然后在你的控制器中：

.controller('FormController', function($scope){
    $scope.doSubmit = function(){
        if($scope.myform.$pristine){}
    }
})

另外，您可以将所有字段设置为required="true"，并像上面描述的那样在表单中使用$valid标志。

- Dylan Watt

---

$scope.myform.$pristine未定义。我需要做其他事情吗？不需要。 - davidlee

你给表单和输入元素命名了吗？你正在访问的控制器在正确的位置使用$scope，以便将表单放入其$scope中吗？http://jsfiddle.net/1774oawr/ - Dylan Watt

Answer 2

你可以使用这个：

ng-show="!yourfield.length"

类似这样：

<form name="yourform">
  <input name="yourfield" ng-model="somefield" ng-minlength="10" required>
  <span ng-show="!yourfield.myfield.$error.required">Something</span>
</form> 

- Rahul Tripathi

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - davidlee

Answer 3

你应该查找表单验证。看一下这个教程。

<input name="name" class="form-control"
    ng-model="user.name" placeholder="Name" required>
  <div class="alert alert-danger"
    ng-show="userForm.name.$error.required">
    Please enter the name.
  </div>

- Ebad Masood

Answer 4

如果所有字段都为空，则以下内容将显示警报

angular.module('app', [])
.controller('FormController', function($scope) {
  $scope.doSubmit = function(){
    if (formIsEmpty($scope.myform)){
      alert('You forgot to enter something before submitting');
    }
  };
  
  function formIsEmpty(form) {
    for (var prop in form) {
      if (!form.hasOwnProperty(prop)) { continue; }
      if (prop[0] === '$') { continue; }
      if ($scope[prop]) { return false; }
    }
    return true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <form name="myform" ng-submit="doSubmit()" ng-controller="FormController">
    <input ng-model="firstName" name="firstName" />
    <input ng-model="lastName" name="lastName" />
    <textarea ng-model="description" name="description"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>

- Scymex

---

它可以正常工作。但是当我们使用表单对象时，它就无法工作了。例如：<input ng-model="user.firstName" name="firstName" /> 或者 <input ng-model="user.firstName" name="user.firstName" /> 请问你能告诉我该怎么做吗？ - Priyanka Pawar