AngularJS具有ng-repeat验证的多种形式

发布时间：2020-12-17 07:00:45 所属栏目：安全来源：网络整理

导读：我使用ng-form作为父表单,使用ng-form进行ng-repeat验证. div ng-form="form" div ng-repeat="field in fields" div ng-form="subform"input.../div /div/div 并验证如下： if ($scope.form.subform.$invalid !$scope.form.subform.$error.required) { // Do

我使用ng-form作为父表单,使用ng-form进行ng-repeat验证.

<div ng-form="form">
    <div ng-repeat="field in fields">
        <div ng-form="subform"><input...></div>
    </div>
</div>

并验证如下：

if ($scope.form.subform.$invalid && !$scope.form.subform.$error.required) {
    // Do something...
}

(这是非常简化的示例,我有不同输入类型和不同名称的更多不同子表单,例如input [text]被命名为TextForm,input [numeric]是NumericForm等.)

如果只有现场,一切都按预期工作.但是,如果ng-repeat生成多个字段,则验证仅触发最后一个子表单,其他子表单将被忽略.

有没有办法循环遍历所有子表单,以检查其中一个是否无效？

此外,我正在标记所有未填写的必填字段,如下所示：

if ($scope.form.$error.required) {
     angular.forEach($scope.form.$error.required,function (object,index) {
             $scope.form.$error.required[index].$setDirty();
         }
     );
}

所以,如果我的字段是这样完成的：

....ng-form="TextForm" ng-class="{ 'has-error': TextForm.$dirty && TextForm.$invalid }"....

并且它标记所有子表单,即使存在许多具有相同名称的子表单.

也许我可以用无效字段做类似的事情？虽然尝试了很多东西但没有任何效果

解决方法

解决方案是创建一个指令,将ngModelController的错误分配给每个ng-repeat输入中的变量.

下面是一个可能的实现来获取每个subForm的错误.
DEMO

JAVASCRIPT(指令)

.directive('ngModelError',function($parse,$timeout) {
    return {
      require: ['ngModel','form'],link: function(scope,elem,attr,ctrls) {
        var ngModel = ctrls[0],ngForm = ctrls[1],fieldGet = $parse(attr.ngModelError),fieldSet = fieldGet.assign,field = fieldGet(scope);

        $timeout(function() {
          field.$error = ngModel.$error;
          field.ngForm = ngForm;
          fieldSet(scope,field);
        });

      }
    };
  });

HTML

<form name="form" ng-submit="submit(form,fields)" novalidate>
  <div ng-form="subForm" ng-repeat="field in fields"
    ng-class="{'has-error': subForm.$invalid && form.$dirty}">
    <label class="control-label">{{field.label}}</label>
    <input type="{{field.type}}" placeholder="{{field.placeholder}}" 
      ng-model="field.model" name="field" 
      ng-required="field.isRequired" class="form-control" 
      ng-model-error="field" />
  </div>
  <br>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JAVASCRIPT(控制器)

请注意字段的结构：

.controller('Ctrl',function($scope) {
    $scope.fields = {
      email: {
        type: 'email',placeholder: 'Enter email',isRequired: true,label: 'Email Address'
      },password: {
        type: 'password',placeholder: 'Enter password',label: 'Password'
      }
    };

    $scope.submit = function(form,fields) {
      form.$dirty = true;

      if(form.$valid) {
        // do whatever
      } else {
        // accessing ngForm for email field
        console.log(fields.email.ngForm);
        // accessing errors for email field
        console.log(fields.email.$error);

        // accessing ngForm for password field
        console.log(fields.password.ngForm);
        // accessing errors for password field
        console.log(fields.password.$error);
      }
    };
  })

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!