表格在AngularJS中始终无效

Question

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?

Answer 1

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.