Angular validations - Enabling/Disabling input fields changes validity of form

Question

I have a form. In which I have input fields and I am doing some validation based on input. Also, there is a submit button which enables only if form is valid.

In this form I am enabling/disabling input field in one of the flow. Initially, when the fields are enable and empty, create button is disabled. After i disable and enable the fields, create button becomes enabled. Although input fields are still empty. More over button which is enabling/disabling this part is outside of this form.

Here is my code

`

<form method="post" novalidate id="example-widgets-form" name="mdnsCtrl.createSubDomainForm" valdr-type="SubDomain">
<div>
    <label>Domain Name</label>
    <input required type="text" name="subDomainName" placeholder="Domain Name" ng-model="mdnsCtrl.newDomain.name">
</div>
<div>
    <label>Description</label>
    <input type="text" name="subDomainDescription" placeholder="Description (Optional)" ng-model="mdnsCtrl.newDomain.description">
</div>
    <button type="button" aria-label="Create" ng-click="mdnsCtrl.createDomain();" 
    ng-disabled="mdnsCtrl.createSubDomainForm.$invalid">
        <span class="ng-scope">Create</span>
    </button>
</div>
</form>

Tried few things like using $setUntouched() and $setPristine(). But nothing is working. Any help will be appreciated.

Adding a codepen example for this: code

Much Thanks. `

Could you provide us with a Minimal, Complete, and Verifiable example, please (JSFiddle, Plunkr, Codepen, or any other) ? — lealceldeiro
– lealceldeiro, Commented Sep 14, 2017 at 13:37

Maxim Shoustin · Accepted Answer · 2017-09-14 16:40:53Z

2

Its not good practice to mix Angular with jQuery. Please read this great post: “Thinking in AngularJS” if I have a jQuery background?

You can easily achieve requested behavior by using ng-disabled="mdnsCtrl.formDisabled"

JS

var ctrl = this;  
  ctrl.formDisabled = false;

  this.disable = function(){
    ctrl.formDisabled = true;  
  };

  this.enable = function(){
    ctrl.formDisabled = false;
  };

HTML

<div>
    <label>Domain Name</label>
    <input class="input-field" required type="text" name="subDomainName" placeholder="Domain Name"
           ng-disabled="mdnsCtrl.formDisabled"
           ng-model="mdnsCtrl.name" >
</div>
<div>
    <label>Description</label>
    <input class="input-field" type="text" name="subDomainDescription"
            ng-disabled="mdnsCtrl.formDisabled"
           placeholder="Description (Optional)" ng-model="mdnsCtrl.description">
</div>

Fixed Demo Codepen

answered Sep 14, 2017 at 16:40

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

2 Comments

coder87 Over a year ago

It did indeed ! Thanks a lot for this solution. Although I found another solution to my problem. Instead of using $(".create-panel *").prop('disabled', true); I used $("input[type='text']").prop('disabled', true); I went through the SO link, it really gave me insight on this.

coder87 Over a year ago

@Maxim Shoustin. But I still have one question. Why was my previous way failing ? Not understanding that part. Why parent div selection made whole form valid ? Please provide insight on this too.

Raghav · Accepted Answer · 2017-09-14 13:48:36Z

0

I think you missed required attribute for Description input..

<input type="text" name="subDomainDescription" required ng-model="mdnsCtrl.newDomain.description">

edited Sep 14, 2017 at 13:48

answered Sep 14, 2017 at 13:39

Raghav

1,2294 gold badges20 silver badges35 bronze badges

1 Comment

coder87 Over a year ago

Description field is optional.

Collectives™ on Stack Overflow

Angular validations - Enabling/Disabling input fields changes validity of form

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related