AngularJS ng 模式行为答案

【问题标题】：AngularJS ng-pattern behaviourAngularJS ng 模式行为
【发布时间】：2014-04-02 12:47:53
【问题描述】：

我有一个 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 绑定？ （我希望表单输入无效，但不以丢失以前的内容为代价）

【问题讨论】：

标签： ng-pattern

【解决方案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;

希望这能解决您的问题。

【讨论】：

所以，每当我需要在前端更改验证规则（使用 ng-pattern）时，您建议我放置 2 个输入，每个输入将具有新模式的输入映射到 DB 中？跨度>
取决于您想要实现的目标，如果您只想更改 ng-pattern 验证并且不关心丢失旧值，那么您可以使用单个标签来做到这一点，并且为 ng-pattern 提供一个变量，而不是内联模式。