Question

我有一个小提琴：

我有一个ng应用程序，它使用ng-repeat来显示货币值数组。这些值的形式必须为n.nn（带有两个小数位的正浮点数）或n（正整数）。

每个重复输入框都有一个模式测试，它设置一个错误标志（myform.texter。$ error.pattern），所以如果这个模式存在，我可以在输入框旁边显示有错误的错误信息。这一切都有效

在表单的末尾，我有一个“添加”按钮，我将用它来添加这些数字。添加按钮现在总是显示，但我只想在所有文本框都包含有效模式时显示此按钮，如：

<button ng-show=“myform….”>Add<button>

但我无法通过显示/隐藏来处理添加按钮。如何以显示/隐藏角度进行此操作？

我的模板代码如下所示：

<div ng-repeat="price in prices">
  <form name="myForm" class="form-horizontal" novalidate>
    <input type="text" name="texter" ng-model="price" ng-pattern="monetaryRegex" \>

    <span ng-show="myForm.texter.$error.pattern">
      Invalid (use 5 or 5.00 for example)!</span>
  </form>
</div>
<br>
<button ng-hide="myform.texter.$error.pattern">
  <!-- would like to use ng-hide=xxx so that this button does not appear if any numbers are invalid-->
  Add
</button>

My Controller is:

app.controller('MainCtrl', function($scope) {
  $scope.instructions = 'Change these price amounts (each must be a  fixed 2 decimal number or an integer) then click Add';

  $scope.prices = [0.32, 12, 45.34, 45];
  $scope.monetaryRegex = /^(([1-9]\d*)?\d)(\.\d\d)?$/;


});

Answer 1

最简单的方法是利用表单的嵌套。所以基本上你可以这样做：

<form name="outerForm">
    <div ng-repeat="...">
         <ng-form name="innerForm"></form>
    </div>
</form>
<button ng-hide="outerForm.$error.pattern">Add</button>

这是你的例子working copy。话虽如此，请检查模式正则表达式。我绝对不是regexes的专家，但由于你的工作不适合我，我把它换成了一个简单的贪心^[0-9]*\.[0-9][0-9]$。

修改：为了使您的验证消息有效，内部表单使用ng-form代替form。示例更新，欢呼。

如何在带有自定义重复验证器的表单按钮上使用ng-show

1 个答案: