CODEWITHSUNDEEP
angularjs
raghuveer ambedkar
raghuveer ambedkar

Reputation: 79

Angular JS validation - not to validate disabled field

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>

Upvotes: 0

Views: 583

Answers (1)

Gowthaman
Gowthaman

Reputation: 1282

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

Upvotes: 1

Related Questions