检查AngularJS中的表单是否为空

时间:2014-08-14 16:37:49

标签: angularjs forms

我有一个包含一些业务规则的项目,最终依赖于检查给定路由中的表单是否为空。当我说空时,我的意思是,空...但是,无论用户是否在某一点输入了信息,都将其删除。据我所知,如果在字段中输入任何内容,$ pristine模型属性将被清除,即使该字段再次清空也会保持清除状态。

我不相信受约束的模型是"空的"在我们的例子中,因为它们可能有一些初始状态,所以不是所有东西都是null或空字符串。如果这是处理这个特定用例的唯一方法,那么就可以做到这一点,但这需要在每个视图上为每个独特的表单手动在每个模型或模型集上实现此代码。

是否有更简单的方法来检查表单是否为空,因为表单的字段处于其初始状态(即文本框为空(无论它们是否已填写并在某个时刻再次清空) ,处于初始状态的复选框(无论它们是否已经被更改,然后由用户在某个时刻手动恢复到其原始状态),单选按钮,下拉菜单等都以相同的方式)?

2 个答案:

答案 0 :(得分:1)

对于任何具有名称的表单,您可以在输入中使用$ invalid和ng-minlength或ng-required / required的组合来确定用户是否将该字段留空。在以下示例中,如果用户通过根据ng-minlength和ng-required属性检查模型,则会禁用提交按钮。

<form name="someForm">
    <input type="text" ng-model="someName" ng-minlength="1" ng-required="true" name="someName">
    <button type="submit" ng-disabled="someForm.$invalid">
</form>

答案 1 :(得分:0)

我想这可能是您正在寻找的解决方案。 将所有模型保存在一个对象中,并在提交表单时将其与空对象进行比较。如果两者都等于:您显示弹出窗口。

HTML:

<form>
   <input type="email" ng-model="user.email" name="uEmail" required/>
   <input type="name" ng-model="user.name" name="uEmail" required/
   <button ng-click="isUnchanged(user)">SUBMIT</button>
</form>

JS:

  .controller('ExampleController', ['$scope', function($scope) {
    $scope.master= {};
    $scope.isUnchanged = function(user) {
      if(angular.equals(user, $scope.master)){

        //show your popup here

       }else{
        //validation, submit etc.
      }
    };

  }]);

请查看此示例中的RESET函数“绑定到表单和控件状态”here =&gt; https://docs.angularjs.org/guide/forms

相关问题