Angular JS validation - not to validate disabled field

Question

I have one checkbox/radio after clicking on it some fields will be shown and in that some fields need to be marked as mandatory and some fields are not mandatory. This mandatory conditions is applied before showing those fields and those are also disabled before showing but I am unable to submit the form because of that.

I don't want these kind of fields to be validated when disabled. Validation should work when I click on radio button.

Can anybody help me in this how to do this???

            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label">{{controls.label}}</label>
                    <input type="checkbox" class="form-control input-lg mandatory" ng-model="formData[$parent.$parent.$index][controls.id]" value="{{controls.value}}" name="control_{{$parent.$parent.$index}}_{{controls.id}}" ng-required="{{controls.mandatory}}">
                    <div ng-show="submitted && profilecreate.control_{{$parent.$parent.$index}}_{{controls.id}}.$error.required" class="error_message">This field is required</div>
                </div>
            </div>
            <div class="col-lg-6" ng-repeat="child in controls.children">
                <div class="form-group"  ng-hide="!formData[$parent.$parent.$index][child.parentId]">
                    <label class="control-label">{{child.label}}</label>
                    <input 
                        type="{{child.type}}"            
                        id="{{$parent.$parent.$index}}_{{child.id}}" 
                        ng-model="formData[$parent.$parent.$index][child.id]" 
                        name="control_{{$parent.$parent.$index}}_{{child.id}}"
                        ng-disabled="!formData[$parent.$parent.$index][child.parentId]" 
                        ng-required="{{child.mandatory}}"
                        ng-class="!formData[$parent.$parent.$index][child.parentId] ? 'disabled' : 'normalinput'">
                    <div ng-show="submitted && profilecreate.control_{{$parent.$parent.$index}}_{{child.id}}.$error.required" class="error_message">This field is required</div>
                </div>
            </div>

I have update my question. I am getting all the data from the server and I am showing the child elements when check box is checked. before checkbox is checked some of the child fields are mandatory where {{child.mandatory}} value sent from the server — raghuveer ambedkar
– raghuveer ambedkar, Commented Oct 17, 2016 at 14:39
in child loop some of the fields mandatory true or false will be sent from the server for those child elements - on clicking on checkbox field will be enabled and validation should work accounting to the data sent by server to this ng-required="{{child.mandatory}}" — raghuveer ambedkar
– raghuveer ambedkar, Commented Oct 17, 2016 at 14:54

Community · Accepted Answer · 2017-05-23 12:16:33Z

1

The reason it's triggering validation even though it's disabled is because you are using ng-hide and not ng-if. Try changing that and it might work.

Here is the difference between ng-if and ng-show/hide

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Oct 17, 2016 at 16:51

Gowthaman

1,3021 gold badge9 silver badges17 bronze badges

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

3 Comments

raghuveer ambedkar Over a year ago

thanks it is working now I don't even need to keep ng-disabled but there is another problem after showing those fields correctly even if input is having required="required" I think it is validating but not showing the error. Can you help in this.

Gowthaman Over a year ago

Change ng-required="{{controls.mandatory}}" to ng-required="controls.mandatory"

raghuveer ambedkar Over a year ago

It is working fine. It was a name mistake that's why it is not showing the error Thanks

Collectives™ on Stack Overflow

Angular JS validation - not to validate disabled field

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related