重新验证SELECT元素的更改事件的输入

Question

我正在编写一个AngularJS应用程序,在这个应用程序中有一个域管理工具.选择域后,我会在表中生成域记录,让用户编辑每一行.由于这些字段是动态创建的,因此我使用ng-form来单独验证每一行,因为它们共享相同的名称.

每个域记录都有一个内容字段,其中包含IP,CNAME等.我使用根据选择的记录类型(A,CNAME,TXT等)的函数生成的正则表达式模式验证此字段.

问题是,当我编辑一个A记录,然后将记录类型更改为CNAME时,表单仍然显示有效,因为没有执行内容字段的新验证.我重新验证它的唯一方法是开始输入内容字段,然后工作正常.

查看下面的图片:

我在A记录上按编辑,一切看起来都很好:

我将记录类型更改为CNAME,即使正则表达式发生更改,表单仍然显示有效.当我更改类型时,我希望重新验证内容(1.2.3.4),因为它是一个新的正则表达式:

我开始在内容字段中输入,现在表单正确无效.我希望在我更改记录类型时发生这种情况,而不仅仅是当我再次开始输入时:

#Slim version of the template to give you an idea on whats going on
<form novalidate name="recordForm" class="css-form" ng-controller="EditRecordCtrl">

    <table>

        <tr ng-repeat="record in domain.data.0" class="gradeA">

            <td ng-init="startingTypeData = record.type" class="domains-td" ng-switch on="record.edit">
                <span ng-switch-default>{{record.type}}</span>
                <span ng-switch-when="true">
                    <select ng-change="domainRecordContentType(record.type)" ng-init="domainRecordContentType(record.type)" ng-model="record.type" ng-options="c for c in domainRecordTypes" class="span12">
                    </select>
                </span>
            </td>

            <td ng-init="startingContentData = record.content" class="domains-td validation-dropdown-error-parent" ng-switch on="record.edit">
                <span ng-switch-default>{{record.content}}</span>
                <span ng-switch-when="true">
                    <ng-form name="innercContentForm">
                        <span class="validation-dropdown-error" ng-show="innercContentForm.content.$error.pattern">
                            {{ 'RECORD_EDIT_FORM_RECORD_CONTENT_PATTERN_MSG' | translate }} ( {{ record.type }} )
                        </span>
                        <input type="text" ng-model="record.content" name="content" required class="span12 edit-record-input" ng-pattern="domainRecordContentRegex.0" required />
                    </ng-form>
                </span>
            </td>

        </tr>

    </table>

</form>

更改下拉菜单时,如何重新验证输入字段？

Plunker示例:http://plnkr.co/edit/VAR5ho 注意!小错误没有在第一行显示A记录.您仍然可以像我在上面的图片中那样测试问题.

使用Thomas自定义指令更新

在chaning下拉之前

更改从A到CNAME的第一个下拉列表后,将擦除所有内容字段

更新保存按钮

<button ng-disabled="recordForm.$invalid" ng-switch-when="true" ng-if="hideRecordType(record.type)" ng-click="recordForm.$valid && editRecord(record, domainId); record.edit=false; $parent.startingNameData=record.name; $parent.startingTypeData=record.type; $parent.startingContentData=record.content; $parent.startingTTLData=record.ttl; $parent.startingPrioData=record.prio" type="submit" class="btn btn-block btn-primary btn-icon" ><i></i>{{ 'DOMAINS_SAVE_BUTTON' | translate }}</button>

最后更新..关于编译元素的奇怪行为

我按下编辑,它进入我的正常编辑视图

我开始输入新的IP地址,直到它变为有效

如果我在有效一次后使内容无效,就像添加一个点一样,该值会被删除.为什么？

基于Thomas代码的当前指令:

domainModule.directive('revalidate', function($compile) {
    return {
        restrict: 'A',
        link : function (scope, element, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
              var reg = scope.$parent.domainRecordContentRegex[0];

              if(!$(element).parent().parent().next().find('ng-form').find('input').val().match(reg)){

                  $compile($(element).parent().parent().next().find('ng-form').children('input[name="content"]').removeClass('ng-valid-pattern'))(scope);
                  $compile($(element).parent().parent().next().find('ng-form').children('input[name="content"]').addClass('ng-invalid-pattern'))(scope);

              }

            });
        }
    };
});

我现在选择实际字段并更改类,使其在正则表达式不匹配时无效.这样,"保存"按钮也会失效.这在下拉列表中更改时有效,但它会以某种方式破坏已编译的元素.

Answer 1

我认为最好的解决方案是创建您自己的验证指令：

.directive('myValidRec', function () {
  var genRegex = function(type){ //...
  };
  return {
    require:'ngModel',
    link: function (scope, el, attrs, ngModel) {

      var validate = function(data){
        var regex = genRegex(scope.$eval(attrs.myValidRec));
        if(regex){
          ngModel.$setValidity('record', regex[0].test(data));  
        }
        return data;
      };

      // triggers validation when the model value changes
      ngModel.$formatters.push(validate);
      ngModel.$parsers.push(validate);

      // triggers validation when the user changes the record type
      scope.$watch(attrs.myValidRec,function(){
        validate(scope.$eval(attrs.ngModel));
      });
    }
  }
});

这允许更清晰的标记：

<td>
  <select ng-model="record.type" ng-options="c for c in types">
  </select>
</td>

<td>
  <ng-form name="innercContentForm">
    <span ng-show="innercContentForm.content.$error.record">
      Pattern error ( {{ record.type }} )
    </span>
    <input type="text" ng-model="record.content" name="content" 
           my-valid-rec="record.type" required />
  </ng-form>
</td>

查看此 plnkr：http://plnkr.co/edit/QzQdYN ?p=preview