Angularjs form validation with input, checkbox and radio button

Question

I need to select at least one checkbox and one radio button with remaining fields.

Here with out selecting checkbox it is allowing to submit and if I select one checkbox then also it not allowing.

Please me to validate this form with least one checkbox and radio button with remaining fields are required

<form name="addUserForm" novalidate>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input class="form-control" type="email" id="email" name="email" ng-model="addUserFormData.email" ng-pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" required placeholder="[email protected]">
                            <span class="error_text" ng-show="addUserForm.email.$error.required && addUserForm.email.$touched">Required</span>
                            <span class="error_text" ng-show="!addUserForm.email.$error.required && addUserForm.email.$error.email && addUserForm.email.$dirty">Invalid Email</span>
                        </div>
                        <div class="form-group">
                            <label for="username">Customer Name:</label>
                            <input class="form-control" type="text" id="username" name="username" ng-model="addUserFormData.username" ng-pattern="/^[\w -]*$/" ng-minlength="2" ng-maxlength="20" maxlength="20" required  placeholder="Customer Name">
                            <span class="error_text" ng-show="addUserForm.username.$error.required && addUserForm.username.$touched">required</span> 
                            <span class="error_text" ng-show="!addUserForm.username.$error.minLength && !addUserForm.username.$error.maxLength && addUserForm.username.$error.pattern && addUserForm.username.$dirty">Name must contain letters and space only.</span>                               
                            <span class="error_text" ng-show="!addUserForm.username.$error.required && (addUserForm.username.$error.minlength || addUserForm.username.$error.maxlength) && addUserForm.username.$dirty">Name must be between 2 and 20 characters.</span>
                        </div>                            
                        <div class="form-group">
                            <label>Role:</label><br />
                            <label class="radio-inline"><input type="radio" name="role" ng-model="addUserFormData.roleAdmin" ng-required="addUserFormData.roleAdmin || addUserFormData.roleUser">Admin</label>
                            <label class="radio-inline"><input type="radio" name="role" ng-model="addUserFormData.roleUser" ng-required="addUserFormData.roleAdmin || addUserFormData.roleUser">User</label>
                        </div>
                        <div class="form-group">
                            <label>Accessable To:</label>
                            <div class="clearfix"><!-- donot delete this -- clear both property --></div>
                            <div class="access_checkbox">
                                <label class="checkbox-inline">
                                    <input type="checkbox" ng-model="addUserFormData.cStoreAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics">C Store Analytics
                                </label>
                                <input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.cStoreAnalytics" placeholder="Username">
                                <input class="form-control" type="password" ng-disabled="!addUserFormData.cStoreAnalytics" placeholder="Password">
                            </div>
                            <div class="access_checkbox">
                                <label class="checkbox-inline">
                                    <input type="checkbox" ng-model="addUserFormData.cameraAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics" >Camera Analytics
                                </label>
                                <input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.cameraAnalytics" placeholder="Token Id">

                            </div>
                            <div class="access_checkbox">
                                <label class="checkbox-inline">
                                    <input type="checkbox" ng-model="addUserFormData.wifiAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics" >Wifi Analytics
                                </label>
                                <input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.wifiAnalytics" placeholder="Username">
                                <input class="form-control" type="password" ng-disabled="!addUserFormData.wifiAnalytics" placeholder="Password">
                            </div>
                            <div class="clearfix"><!-- donot delete this -- clear both property --></div>
                            <p class="note_text">Make sure you have entered correct username and password</p>
                        </div>
                        <div class="form-group">
                            <label>Password:</label>
                            <input class="form-control" type="password" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label>Confirm password:</label>
                            <input class="form-control" type="password" placeholder="Confirm password">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="submit" ng-disabled="addUserForm.$invalid" ng-click="addUser()" class="btn redcolor_btn"> <!--data-dismiss="modal"-->Add</button>
            </div>
        </form>

@JayantPatil, i am not facing any issue with role (radio button), i am facing issue in checkbox validation — Arun Kumar M
– Arun Kumar M, Commented Mar 16, 2017 at 7:09

Kursad Gulseven · Accepted Answer · 2017-03-16 08:18:40Z

1

I think changing ng-required slightly will solve your problem.

So, instead of;

<input type="checkbox"
    ng-model="addUserFormData.cStoreAnalytics"
    ng-required="addUserFormData.cStoreAnalytics
                    || addUserFormData.cameraAnalytics
                    || addUserFormData.wifiAnalytics">

use this (apply same logic for all checkboxes):

<input type="checkbox"
    ng-model="addUserFormData.cStoreAnalytics"
    ng-required="!(addUserFormData.cStoreAnalytics
                    || addUserFormData.cameraAnalytics
                    || addUserFormData.wifiAnalytics)">

answered Mar 16, 2017 at 8:18

Kursad Gulseven

2,0081 gold badge27 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Angularjs form validation with input, checkbox and radio button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related