Validating list of variables in ng-repeat - angularjs

Question

In this plunk I have an ng-repeat of input fields. Each field has to pass two validations: (1) the value cannot be empty, and (2) if num = 1 then the value needs to be a number. I'm using ng-form in each row to validate the values independently (I cannot have the ng-repeat inside a <form>.
The problem is that messages are not displayed correctly. To replicate, in the plunk add a 1 to the third field. It becomes b1 that is not a valid number, still the Value should be a number error message is not displayed. It is displayed after you change the value again, for example to b11. Where is the problem and how to fix it?
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

I've changed a little of your code.
Please check this 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;
};
I am not certain that my fiddle is proper to your purpose,
but I hope this can help you. :)

Answer 2

You should fix some bugs at first:
1) add this to the head-tag
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.js"></script>
2) and in the JS
var app = angular.module('app', ['ngMessages']);
then...
in html
<input type="text" name="val" ng-model="v.val" style="float:left" required ng-model-sniffer/>
<div 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>
in JS
app.directive('ngModelSniffer', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, model)
{
model.$validators.shouldBeNumber = function(modelValue, viewValue)
{
return !isNaN(parseFloat(viewValue));
};
}
};
});

Answer 3

when the list is initially displayed ng-change is not fired because
The ngChange expression is only evaluated when a change in the input
value causes a new value to be committed to the model.
It will not be evaluated:
if the value returned from the $parsers transformation pipeline has not changed
if the input has continued to be invalid since the model will stay null
if the model is changed programmatically and not by a change to the input value
you can use a custom filter to achieve the same behaviour
html
<div ng-repeat="v in vals | filter:checkError">
</div>
js
$scope.checkError = function (item) {
if(item.val is not number)
displayError = true;
return true;
};