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

Question

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)

RIYAJ KHAN · Accepted Answer · 2016-09-15 14:39:29Z

1

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

edited Sep 15, 2016 at 14:39

answered Sep 15, 2016 at 14:32

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nadiya Over a year ago

I cannot set myForm.$submitted==true in the controller when all the fields are not present

RIYAJ KHAN Over a year ago

If you want then dont use ng-submit

Nadiya Over a year ago

Thanks, I didn't know about 'novalidate'.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related