我正在编写一个 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 自定义指令更新

改变下拉菜单之前

将第一个下拉列表从 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>

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

我按下编辑，它进入我的正常编辑 View

我开始输入一个新的 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);

              }

            });
        }
    };
});

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

最佳答案

要触发验证，在 ng-change 的 select 中将输入值设置为它的值。将 plunker 中的第 44 行更改为

<select ng-change="domainRecordContentType(record.type);innercContentForm.content.$setViewValue(innercContentForm.content.$viewValue)" ng-init="domainRecordContentType(record.type)" ng-model="record.type" ng-options="c for c in types">

更新了 plunker http://plnkr.co/edit/D1AFHi

来源:https://stackoverflow.com/a/17102401/69362

关于javascript - 在 SELECT 元素的更改事件中重新验证输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18799543/