How to remove or disable input from form validation

Question

I have an input that is optionally disabled. When disabled it still seems to take part in form validation. How can I remove this input from form validation?

<form ng-app name="myForm">
    <label>Name</label>
    <input type="text" name="name" ng-model="form.name" ng-disabled="show" required>
    <input type="submit" ng-disabled="myForm.name.$invalid">
    <input type="submit" ng-click="show = !show" value="Toggle">
</form>

Notice on the example that when you hit toggle the input is disabled but the Submit button does not become enabled.

This is one of the reasons I don't like the form validation approach in Angular (although not specific to Angular, it is encouraged), in more complex scenarios you're going to end up with logic bleeding in to the markup. I'd consider moving all of your validation logic in to the model and out of the UI. github.com/nadavsinai/ndValidation is a directive which you can use, I've also outlined my preferred way of doing it here: northerncodemonkey.wordpress.com/2014/11/26/… although haven't managed to get it onto GIT yet. — DoctorMick
– DoctorMick, Commented Dec 5, 2014 at 9:07

Lander Van Breda · Accepted Answer · 2014-12-05 09:06:18Z

1

You can use ng-required in this case :

<form ng-app name="myForm">
    <label>Name</label>
    <input type="text" name="name" ng-model="form.name" ng-disabled="show" ng-required="!show">
    <input type="submit" ng-disabled="myForm.name.$invalid">
    <input type="submit" ng-click="show = !show" value="Toggle">
</form>

answered Dec 5, 2014 at 9:06

Lander Van Breda

8736 silver badges12 bronze badges

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

3 Comments

Chris Over a year ago

This works in the demo but, when I have a custom directive applied doesnt work.. How can I make this work with a custom directive?

Lander Van Breda Over a year ago

@Chris it depends on how your directive is written, to get this functionality your directive should also support to be disabled. Global ways that always work I don't know directly. Ofcourse there should be a possibility to write a directive that always triggers a valid on a field when true.

Chris Over a year ago

I ended up doing this in the directive to select if it was required or not, based on your original answer, thanks. if (ele.attr("required") == "required") { }

Varun Chakervarti · Accepted Answer · 2014-12-05 09:18:35Z

0

You can do it with pure JavaScript. By searching for the attribute you created.

function validateForm() {
    var inputElements = document.forms["myForm"].getElementsByTagName("input");
    for(inpt_ele=0; inpt_ele<inputElements.length; inpt_ele++) {
        if(inputElements[inpt_ele].getAttribute("disabled") == "disabled") {
            //skip
        }
        else {
            //validate
        }
    }
}
validateForm();

answered Dec 5, 2014 at 9:18

Varun Chakervarti

1,0428 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to remove or disable input from form validation

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related