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](http://stackoverflow.com/help/mcve), please (JSFiddle, Plunkr, Codepen, or any other) ? — lealceldeiro, Sep 14 '17 at 13:37
Added a code pen example https://codepen.io/coder87/pen/eGmxYg — coder87, Sep 14 '17 at 14:44

score 2 · Accepted Answer · answered Sep 14 '17 at 16:40

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

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, Sep 14 '17 at 18:17
@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. — coder87, Sep 14 '17 at 18:24

Raghav · Answer 2 · 2017-09-14T13:48:36.827

0

I think you missed required attribute for Description input..

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

edited Sep 14 '17 at 13:48

answered Sep 14 '17 at 13:39

Raghav

1,139
4
15
35

Description field is optional. – coder87 Sep 14 '17 at 13:42

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

2 Answers2