触发形式错误/清空。$ invalid

时间:2017-06-22 05:25:44

标签: angularjs

<form class="form-inline" name="form" novalidate>
        <div class="sub-form" ng-form is-active ng-init="active = true" name="info">
        <div class="col-md-4 col-sm-6 col-ie-4">
                <div class="select-input">
                  <label for="xyz">Xyz *</label>
                  <i class="fa fa-check-circle success" ng-show="form.info.xyz.$valid"></i>
                  <i class="fa fa-spinner fa-spin"></i>
                  <i class="fa fa-times-circle error" ng-show="(form.info.xyz.$invalid && !form.info.xyz.$pristine)"></i>
                  <div class="styled-select">
                    <select
                      heights
                      name="xyz"
                      id="xyz"
                      ng-options="xyz.in as xyz.ft for xyz in xyzs"
                      ng-model="player.xyz"
                      required>
                      <option value="" selected="selected">-- Select --</option>
                    </select>
                  </div>
                </div>
              </div>
             </div>
</form>

<div class="back-next-button-row">

    <div class="red-button tiny-button next-button" ng-if="form.$valid">
      <button ng-click="next()"><span class="button-text">Next</span><i class="fa fa-chevron-right"></i></button>
    </div>

    <div class="red-button tiny-button next-button" ng-if="form.$invalid">
      <button ng-click="error()"><span class="button-text">Error</span><i class="fa fa-chevron-right"></i></button>
    </div>

</div><!--back-next-button-row-->


In Script

 $scope.form = {};
    $scope.form.info = {};

    $scope.formError = function () {
      console.log($scope.form.info.xyz);
      //Getting Object {}

     }

在html中它显示我期望的正确对象       基本上我想检查一下        如果($ scope.form.info.xyz。$无效){        警报(&#34; Invlid&#34)        }

如果我知道为什么这会在这个前景中产生问题,我将感激不尽

1 个答案:

答案 0 :(得分:0)

使用angular,您可以在HTML中执行此操作,而不必将其带到脚本中。如果要检查任何表单元素是无效还是不完整,可以添加这样的元素。

<p class="text-danger" ng-show="form.$invalid">Invalid</p>

如果您仍想点击,请尝试以下操作。

在HTML中捕获函数中的表单名称。

<button ng-click="next('form')">Validate</button>

在JS中,您可以使用如下所示的函数

$scope.next = function(form){
    if ($scope[form].$valid) {
        alert("True");
    } else {
        alert("Invalid");
    }    
};