Zelenka Zelenka - 2 months ago 7
AngularJS Question

Angular validation (can't reach controller if required fields are empty)

I'm trying to implement validation for a form using Angular 1.1.1 and Ionic.

There are many "wallets" and the user needs to send a new "value" to each of the wallet. There's also a specified previous value of the wallet. The validation should check if all the input field are filled out and if the new value is bigger than previous.

My form (index.html):

<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl">
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{item.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
</div>
<button class="button" type="submit">Submit</button>
</form>


It results in always showing "!!!" error for empty input even if the user haven't already submitted the form. I tried to use
$scope.myForm.submitted=true;
in the controller but the problem is it reaches the controller only if all the fields are filled out.

My controller (values.js):

'Use Strict';
angular.module('App')

.controller('valuesCtrl', function($scope, $localStorage, UserService, $state) {
$scope.sendValues = function(wallets){
debugger;
...
})


Can anyone help me to figure out why I can't see the debugger window if not all the fields are with info?
Can you suggest how to make a custom validation? (new value should be bigger than previous)

Answer

It results in always showing "!!!" error for empty input even if the user haven't already submitted the form?

Your ng-show should be

ng-show="myForm.$submitted==true && myForm.wallet_{{item.id}}.$error.required"

and form should be have novalidate attribute if you want custom validation

<form name="myForm" ng-submit="sendValues(wallets)" novalidate>

otherwise it will do default html validation

I tried to use $scope.myForm.submitted=true; in the controller but the problem is it reaches the controller only if all the fields are filled out

Its because ng-submit will validate for true condition($valid==true) for every form control element .

If it is filled and valid data then only form $valid flag is set to true otherwise not.In case $valid==true,you will able to submit the form and function in controller get fired

you can use

<input type="submit" ng-click="sendValues(wallets)" value="Save" />

if you want to submit the form without validation and want to do validation in controller

You can read more from angular#form

Comments