Question

我正在尝试在Angular.js中创建表单生成器应用程序，但我仍然坚持验证字段。 Angular提供了很好的验证，但我的用例缺少一件事，那就是动态地打开/关闭各种验证。我想让我的用户添加新的表单字段，然后单独为每个字段指定验证（Angular default minlength，maxlength，...）。

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

我创建了一个简单的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

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

Answer 2

我应该尝试这样的事情：

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;
    }
  }

});

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

动态添加角度场验证

2 个答案: