Question

我有以下html：

<tr ng-repeat="(id, item) in $ctrl.items">
<td>
    <input type="text" class="form-control" ng-model="item.minRange" ng-pattern="$ctrl.ipPattern"
           name="{{$index}}_minRange"  />
    <div ng-messages="$ctrl.form[$index + '_minRange'].$error"
         ng-show="$ctrl.form[$index + '_minRange'].$touched">
        <div ng-message="required">Ips are required</div>
        <div ng-message="pattern">IP address is not valid</div>
    </div>
</td>
<td>
    <input type="text" class="form-control" ng-model="item.maxRange" ng-pattern="$ctrl.ipPattern"
           name="{{$index}}_maxRange" ng-required="item.minRange" />
    <div ng-messages="$ctrl.form[$index + '_maxRange'].$error"
         ng-show="$ctrl.form[$index + '_maxRange'].$touched">
        <div ng-message="required">Ips are required</div>
        <div ng-message="pattern">IP address is not valid</div>
    </div>
</td>

控制器包含：

$ctrl.ipPattern = new RegExp('^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$|^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$|^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$', 'g');
$ctrl.items = //array of items containing minRange, maxRange and description.

导致错误的方案如下：

我输入一个有效的IP到maxRange，然后我输入一个有效的IP到minRange。当minRange的输入变为有效模式时，maxRange变为无效模式的一些原因。如果我再次输入相同的值，它将起作用。

什么可能导致这种行为？

当ng-required值改变时，ng-pattern变为无效

0 个答案: