Question

我有 ng-pattern 来强制执行特定格式（例如，IP v4地址）：

<input ng-model="ip" 
       ng-pattern="/(([2][0-5]{2}|[2][0-4]\d|[01]?\d{0,2})\.){3}([2][0-5]{2}|[2][0-4]\d|[01]?\d{0,2})/">
</input>

数据来自数据库，但我们可以说需求已经发展，现在应该存储 IPv6 。我本来期望改变正则表达式，但它删除了输入的内容！检查此plunker（您可以在哪里看到失败内容效果）：http://plnkr.co/edit/UPrU35

将输入切换为必需项是一回事，我只需要用户遵守新规则。

问题：

如何继续应用ng-pattern但仍保持ng-model绑定？ （我希望表单输入无效，但不会以丢失以前的内容为代价）

Answer 1

我不太明白你究竟需要什么，但我发现代码中存在问题，

您在3个不同的输入标签上使用相同的型号，这是不可取的。我建议使用这样的东西，

<label>No pattern</label>
  <input ng-model="ip4.test1"></input><br>

  <!-- Pattern 1 -->
  <label>Pattern (IP v4)</label>
  <input ng-model="ip4.test2" ng-pattern="/(([2][0-5]{2}|[2][0-4]\d|[01]?\d{0,2})\.){3}([2][0-5]{2}|[2][0-4]\d|[01]?\d{0,2})/"></input><br>

  <!-- Pattern 2 -->
  <label>Changed pattern (IP v6)</label>
  <input ng-model="ip4.test3" ng-pattern="/([A-Fa-f0-9]{1,4}::?){1,7}[A-Fa-f0-9]{1,4}/"></input><br>

通过这样做，您可以避免丢失其他输入字段，另外还可以获得ng-pattern验证。

在你的JS文件中，你可以使用这样的东西，

$scope.ipv4 = {

 test1 : <value> , 
 test2 : <value>,
 test3 : <value>};

并像这样访问它的值，

var temp = $scope.ipv4.test1;

希望这能解决您的问题。

AngularJS ng-pattern行为

1 个答案: