angularjs - 验证 ng-repeat 中的变量列表

Question

In this plunk我有一个ng-repeat输入字段。每个字段必须通过两次验证:(1) 值不能为空，(2) if num = 1那么该值需要是一个数字。我正在使用ng-form在每一行中独立验证值(我不能将 ng-repeat 放在 <form> 中。

问题是消息无法正确显示。要复制，in the plunk添加1到第三个字段。变成b1这不是一个有效的数字，仍然是 Value should be a number不显示错误消息。再次更改该值后会显示，例如更改为 b11 。问题出在哪里以及如何解决？

HTML

<div ng-repeat="v in vals">
  <ng-form name="formval">
      <input type="text" name="val" ng-model="v.val" style="float:left" 
            ng-change="seeError(formval,v.num,v.val)" required/>
      <div ng-show="!formval.val.$valid" ng-messages="formval.val.$error" class="errorMsg">
           <div ng-message="shouldBeNumber">Value should be a number</div>
           <div ng-message="required">Value cannot be empty</div>
      </div> 
      {{ 'error row #' + $index}} {{formval.val.$error}}
      <br/><br/><br/>
    </ng-form>
 </div>

Javascript

var app = angular.module('app', []);

app.controller('ctl', function ($scope) {

    $scope.vals = [
      {val: 'a', num: 0},
      {val: 2, num: 1 },
      {val: 'b', num: 1}
    ];


    $scope.seeError = function(form,num,value){
          delete form.val.$error.shouldBeNumber;
          if (value && value.trim()==="") // omit as form will show an error
              return;
          if (num===1) // should be a number
              if (isNaN(parseFloat(value)))
                  form.val.$error.shouldBeNumber = true;
    };

});

Answer 1

我更改了您的一些代码。

请检查这个 fiddle 。

form validation

$scope.seeError = function(form,num,value){
    form.val.$error.required = false;
    form.val.$error.shouldBeNumber = false;
    if (value===undefined) // omit as form will show an error
        form.val.$error.required = true;
    if (num===1&&isNaN(Number(value))) // should be a number
        form.val.$error.shouldBeNumber = true;
};

我不确定我的 fiddle 是否适合您的目的，

但是我希望这可以帮助你。 :)