Question

我有一个表单字段，根据其他字段的值进行验证。为了实现这一点，我创建了一个验证指令。

更具体地说，我有一组两个单选按钮和一个文本字段，可以根据所选的单选按钮进行验证。

如果选择第一个单选按钮，则text-fields值可以是0-100 如果选择了第二个单选按钮，则text-fields值可以是0-infinite

我将所选单选按钮的值传递给指令，并根据该条件检查文本字段值的验证。

到目前为止一切顺利。除了一些边缘情况之外，事情在这种情况下运行良好。

例如，如果最初选择了第二个单选按钮，那么如果在文本字段中写入400，然后选择第一个单选按钮。它没有显示无效字段。

directive('discountValidator', function () {
return {
  require: 'ngModel',
  scope: {
    discountValidator: '='
  },
  link: function (scope, attr, elem, ngModel) {
    ngModel.$validators.discount = function (modelvalue) {
      return scope.discountValidator.toLowerCase() === 'flat' ? modelvalue >= 0 : (modelvalue >= 0 && modelvalue <= 100);
    };
  }
};

}）;

html

<md-input-container class="md-block">
      <md-radio-group ng-model="vm.type" layout>TYPE&nbsp;
        <md-radio-button value="PERCENT" checked>%</md-radio-button>
        <md-radio-button value="FLAT">Flat</md-radio-button>
      </md-radio-group>
    </md-input-container>

    <!-- Discount Amount Field-->
    <md-input-container class="md-block">
      <input type="number" name="discountAmt" ng-model="vm.value" required discount-validator="vm.type">

      <!-- Error Messages -->
      <div ng-messages="form1.discountAmt.$error" ng-if="form1.$submitted || form1.discountAmt.$touched">
        <div class="error" ng-message="required">Required</div>
        <div class="error" ng-message="discount">Invalid Discount</div> 
      </div>
    </md-input-container>

  </div>

＆＃13;

function DiscountValidator() {
    return {
      require: 'ngModel',
      scope: {
        discountValidator: '='
      },
      link: function (scope, attr, elem, ngModel) {
        ngModel.$validators.discount = function (modelvalue) {
          return scope.discountValidator.toLowerCase() === 'flat' ? modelvalue >= 0 : (modelvalue >= 0 && modelvalue <= 100);
        };
      }
    };
  }

var app = angular.module('app', ['ngMessages', 'ngMaterial'])
      .controller('mainCtrl', function($scope){  
        var vm = this;
        vm.onSubmit = function(form) {

        };
        
        vm.type='PERCENT';
      })
    .directive('discountValidator', DiscountValidator);

＆＃13;

<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta name="description" content="Dynamic validation in AngularJs">
   <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
    
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>



<body ng-controller='mainCtrl as vm'>
  <md-content>
    <form name="form1" ng-submit="vm.onSubmit(addressForm)" novalidate>
      <div layout="column">

        <md-input-container class="md-block">
          <md-radio-group ng-model="vm.type" layout>TYPE&nbsp;
            <md-radio-button value="PERCENT" checked>%</md-radio-button>
            <md-radio-button value="FLAT">Flat</md-radio-button>
          </md-radio-group>
        </md-input-container>

        <!-- Discount Amount Field-->
        <md-input-container class="md-block">
          <input type="number" name="discountAmt" ng-model="vm.value" required discount-validator="vm.type">

          <!-- Error Messages -->
          <div ng-messages="form1.discountAmt.$error" ng-if="form1.$submitted || form1.discountAmt.$touched">
            <div class="error" ng-message="required">Required</div>
            <div class="error" ng-message="discount">Invalid Discount</div> 
          </div>
        </md-input-container>

      </div>

      <md-button type='submit' class='md-primary'>Submit</button>
    </form>
  </md-content>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

  
</body>
</html>

＆＃13;

Answer 1

由于我的评论解决了问题，我将其作为答案发布。该示例最简单的解决方案是在单选按钮更改时清除输入字段。

AngularJS中的动态验证

1 个答案: