CODEWITHSUNDEEP
javascriptangularjs
pavon147
pavon147

Reputation: 713

Form is always invalid in AngularJS

It seems very trivial, so I'm sorry if I just missed something, but I can't figure it out.

I want to enable my button which sends data using AJAX when form is valid, but the button is always disabled.

Have a look:

<form name="UserReg" novalidate>

        <div class="form-group">
            <input type="text" name="user_name"
                                data-ng-model="UserName"
                                ng-maxlength=20
                                placeholder="Name"
                                required />

            <div data-ng-messages="UserReg.user_name.$error"
                 data-ng-show="UserReg.user_name.$touched">

                 <div data-ng-messages-include="angular_app/validation/form_messages.html"></div>

            </div>
        </div>


       <div class="form-group" style="padding-top:20px;">
            <button type="button" name="add_user"
                                    class="top-menu-button"
                                    data-ng-click="AddUser()"
                                    ng-disabled="UserReg.$invalid">
                <i class="fa fa-plus fa-lg padding-r-5"></i> Add User
            </button>
        </div>

</form>

Where is the problem?

Upvotes: 2

Views: 2148

Answers (1)

Vivek
Vivek

Reputation: 13238

First you should enclose the value of ng-maxlength in double quotes. Second, Since you have required attribute on the input field, The form will become valid only if the input field has some value (type something in it & the form will become valid).

Otherwise if not necessary remove the required attribute from the input field.

Upvotes: 4

Related Questions