AngularJS表单验证：没有显示ng-required字段的has-error

时间：2016-04-13 02:34:46

标签： javascript css angularjs html5 twitter-bootstrap

当用户正在编辑其地址的任何部分时，每个字段周围应该有红色的无效边框，表示需要完整的表单。我无法通过“地址”字段显示无效的红色边框。

set-dirty-if='user.objectId'将每个字段设置为脏。我可能有访问逻辑，但想法是强制用户填写每个地址字段并有指标来执行此操作。

为了显示“地址”无效错误，我错过了什么？

（请注意，填充“地址”字段会将城市，州，拉丁边框变为红色，这是所需的）

<form class="form" name='form' class="edit-form-wrapper" novalidate>
    <fieldset class="form-group" ng-class="{'has-error': form.address.$dirty && !form.address.$valid, 'has-feedback': form.address.$dirty && !form.address.$valid}">
      <label class="control-label" for="address">Address</label>
      <input type="text" class="form-control" name="address" ng-model="user.address" set-dirty-if="user.objectId" ng-required="user.city || user.state || user.zip">
      <span ng-show="form.address.$dirty && !form.address.$valid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>


     <fieldset class="form-group" ng-class="{'has-error': form.city.$dirty && !form.city.$valid, 'has-feedback': form.city.$dirty && !form.city.$valid}">
       <label class='control-label' for="city">City</label>
       <input type="text" class="form-control" name="city" ng-model="user.city" set-dirty-if='user.objectId' ng-required='user.address || user.state || user.zip'>
       <span ng-show='form.city.$dirty && !form.city.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
     </fieldset>


     <fieldset class="form-group" ng-class="{'has-error': form.state.$dirty && !form.state.$valid, 'has-feedback': form.state.$dirty && !form.state.$valid}">
       <label class='control-label' for="state">State</label>
       <input type="text" class="form-control" name="state" ng-model="user.state" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.zip'>
       <span ng-show='form.state.$dirty && !form.state.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
     </fieldset>



     <fieldset class="form-group" ng-class="{'has-error': form.zip.$dirty && !form.zip.$valid, 'has-feedback': form.zip.$dirty && !form.zip.$valid}">
       <label class='control-label' for="zip">Zip Code</label>
       <input type="text" class="form-control" name="zip" ng-model="user.zip" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.state'>
       <span ng-show='form.zip.$dirty && !form.zip.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
     </fieldset>
   </form>

enter image description here

1 个答案:

答案 0 :(得分：1)

将地址字段的ng-required值从user.city || user.state || user.zip更改为(user.city || user.state || user.zip) ? true : false)，即：

<input type="text" class="form-control" name="address" ng-model="user.address"
    ng-required="(user.city || user.state || user.zip) ? true : false">

请参阅下面的工作示例

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div ng-app class="container">
  <form class="form" name='form' class="edit-form-wrapper">
    <fieldset class="form-group" ng-class="{'has-error': form.address.$dirty && !form.address.$valid, 'has-feedback': form.address.$dirty && !form.address.$valid}">
      <label class="control-label" for="address">Address</label>
      <input type="text" class="form-control" name="address" ng-model="user.address" ng-required="(user.city || user.state || user.zip) ? true : false">
      <span ng-show="form.address.$dirty && !form.address.$valid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>


    <fieldset class="form-group" ng-class="{'has-error': form.city.$dirty && !form.city.$valid, 'has-feedback': form.city.$dirty && !form.city.$valid}">
      <label class='control-label' for="city">City</label>
      <input type="text" class="form-control" name="city" ng-model="user.city" set-dirty-if='user.objectId' ng-required='user.address || user.state || user.zip'>
      <span ng-show='form.city.$dirty && !form.city.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>


    <fieldset class="form-group" ng-class="{'has-error': form.state.$dirty && !form.state.$valid, 'has-feedback': form.state.$dirty && !form.state.$valid}">
      <label class='control-label' for="state">State</label>
      <input type="text" class="form-control" name="state" ng-model="user.state" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.zip'>
      <span ng-show='form.state.$dirty && !form.state.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>



    <fieldset class="form-group" ng-class="{'has-error': form.zip.$dirty && !form.zip.$valid, 'has-feedback': form.zip.$dirty && !form.zip.$valid}">
      <label class='control-label' for="zip">Zip Code</label>
      <input type="text" class="form-control" name="zip" ng-model="user.zip" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.state'>
      <span ng-show='form.zip.$dirty && !form.zip.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </fieldset>
  </form>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题