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, Oct 17 '16 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, Oct 17 '16 at 14:54
child elements will get enabled. before enabling only some of the fields are enabled I wanted to prevent that — raghuveer ambedkar, Oct 17 '16 at 15:04

score 1 · Accepted Answer · edited May 23 '17 at 12:16

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 '17 at 12:16

Community

1
1

answered Oct 17 '16 at 16:51

Gowthaman

1,262
1
9
15

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. – raghuveer ambedkar Oct 17 '16 at 17:19
Change `ng-required="{{controls.mandatory}}"` to `ng-required="controls.mandatory"` – Gowthaman Oct 17 '16 at 20:12
It is working fine. It was a name mistake that's why it is not showing the error Thanks – raghuveer ambedkar Oct 18 '16 at 08:23

Angular JS validation - not to validate disabled field

1 Answers1