动态添加 angular 字段验证

Question

我正在尝试在 Angular.js 中创建表单生成器应用程序，但我卡在了验证字段上。 Angular 提供了很好的验证，但我的用例缺少一件事，那就是动态打开/关闭各种验证。我想让我的用户添加新的表单字段，然后单独为每个字段指定验证（Angular 默认最小长度、最大长度...）。

假设我想创建一个按钮，它将在指定字段上添加/删除最小长度验证（字段存储在我的模型中并通过自定义表单和字段指令显示），我应该怎么做？

我创建了一个简单的 Plunker - http://plnkr.co/edit/pCXgwgnNbZkcAcl263JN?p=preview 你能告诉我 toggleValidation() 函数中应该有什么吗？

HTML

<div ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" class="form-group">
          <label>Name</label>
          <input type="text" ng-model="user.name" class="form-control" name="name" />
          <p class="help-block" ng-show="userForm.name.$invalid && !userForm.name.$pristine">Validation error.</p>
        </div>
        <a href="" class="btn btn-success" ng-click="toggleValidation()">Toggle minlength validation</a>

JS

validationApp.controller('mainController', function($scope) {

    $scope.toggleValidation = function()
    {
      // ???
    }

});

Answer 1

我应该尝试这样的事情：

validationApp.controller('mainController', function($scope) {

  $scope.toggleValidation = function(validationFlag) {
    $scope.validationIsOn = validationFlag;
  }

  $scope.minlengthValidation = function (field, minlen) {
    if ($scope.validationIsOn) {
      return (field.length >= minlen);
    } else {
      return true;
    }
  }

});

注意：此代码不是真正的代码，但它只是想给出构建真正代码的想法...

Answer 2

您应该考虑使用 http://formly-js.github.io/angular-formly/#!/ 之类的东西从一组 JSON 对象动态生成表单。然后打开和关闭某些验证方法将非常非常容易。

动态添加 angular 字段验证

Add angular field validation dynamically

javascript

validation

angularjs