Multiple required inputs in ng Messages [Angular]

Question

I recently have a problem with ng message in angular. I tried to use it as validator however noticed that something don't work the way I want. I want the ctrl.login() function run when the user provide both password and username. Unfortunately right now it is enough to provide just one of this to and the function will trigger. How can I fix this?

<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()"> 
        <div class="list list-inset">
            <div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
                <input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
            </div>

            <div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>

            <div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
                <input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
            </div>

            <div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
            </div> 

        </div>          
        <div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
        <button class="button button-full button-calm button-login" data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid" type="submit">Sign In</button>
    </form>

    <script id="error-list.html" type="text/ng-template">  
        <div class="error" ng-message="required">
            This field is required
        </div>              
    </script>

EDIT: For clarification. Thx for pointing out the button disable feature but it is not the point of my question. The issue is that the ctrl.login function will be triggered (in other words the form will be submited) despite only 1 out of 2 required input have been filled. I expect that the ngMessage will make it impossible to submit the form if username OR password will be empty. The disable feature on the submit button is just a quick hotfix that i want to remove in the future.

<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()"> 
        <div class="list list-inset">
            <div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
                <input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
            </div>

            <div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>

            <div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
                <input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
            </div>

            <div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
            </div> 

        </div>          
        <div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
        <button class="button button-full button-calm button-login" type="submit">Sign In</button>
    </form>

    <script id="error-list.html" type="text/ng-template">  
        <div class="error" ng-message="required">
            This field is required
        </div>              
    </script>

EDIT2: Just if case anyone is wondering. I solved the problem. Thx for help and contribution :)

what is the issue? ctrl.login method is not calling properly **OR** ng-message template is not shown properly? — Pankaj Parkar, Aug 08 '15 at 18:07
ctrl.login method show properly but it is showed despite only 1 input being filled. I expect that it will trigger after I fill both inputs. — , Aug 08 '15 at 18:52
yeah. the issue was actually that i should add authorizationForm.$validate to the ng-submit part. I thought angular will auto validate it. — , Aug 08 '15 at 19:03

score 0 · Answer 1 · answered Aug 08 '15 at 18:39

0

You just need to replace && to || in :

data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid"

answered Aug 08 '15 at 18:39

Roman Koliada

4,286
2
30
59

thx for pointing this out however the point is to not have to disable the button at all. I want the form to not submit despite being able to click the button. – Aug 08 '15 at 18:46

score 0 · Answer 2 · answered Aug 08 '15 at 18:39

0

You should change the data-ng-disabled condition to 'authorizationForm.password.$invalid || authorizationForm.username.$invalid'. Right now as long as one of the two is valid (but not necessarily both), the user can click submit.

answered Aug 08 '15 at 18:39

Bennett Adams

1,808
14
17

Multiple required inputs in ng Messages [Angular]

2 Answers2