Angular form - disable validation by ng-required

Question

I have a email field in a form:

   <div class="col-xs-4"> 
               <label>mail</label>
               <input 
               ng-required="vm.isMailReqired"
               pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$" 
                            class="form-control sgn-rounded_textbox" 
               name="emailBox"  
               ng-disabled="!vm.model.signAgreement"               
               ng-model="vm.model.emails.beitEsek">

     </div>

In my controller vm.isMailReqired is set to false but still the emailBox.$invalid is true and as a result my form controller(formsToSign) is false - formsToSign.$valid:false.

EDIT - entire form

<form name="formsToSign" novalidate class="form-validation">
<div class="row">
            <div class="col-xs-12 form-group">
                <div class="col-xs-4"> 
                    <label>mail</label>
                    <input 
                    ng-required="vm.isMailReqired"
                    pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$" 
                    class="form-control sgn-rounded_textbox" 
                    name="emailBox"   
                    ng-disabled="!vm.isMailReqired"
                    ng-model="vm.model.emails.beitEsek">

                </div>
                <div class="col-xs-4">
                    <label>Secondary maik</label>
                    <input pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$" 
                    dir= "ltr"
                    class="form-control sgn-rounded_textbox" 
                    name="emailBox1" 
                    input-change = "vm.mailField"
                    ng-model="vm.model.emails.emailField"                   
                    >
                </div>
                <div class="col-xs-4">
                    <label>Manger Mail</label>
                    <input pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$" 
                    dir= "ltr"
                    class="form-control sgn-rounded_textbox" 
                    name="emailBox2" 
                    input-change = "vm.mailField" 
                    ng-model="vm.model.emails.menahelEmailField"
                    >
                </div>
            </div>
        </div>
        <div class="row">
            <div class="pull-left">
<!--Show this button when form is valid only -->
                <button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="vm.buttonDisableValidation || formsToSign.$invalid"
                    class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>


    </form>

Thanks for any help.

Still its unclear, could you relevant form html with form tag?? — Pankaj Parkar
– Pankaj Parkar, Commented Feb 28, 2017 at 10:04
@PankajParkar - full form include button with check, also refactor controller name so it will be more clear. — Itsik Mauyhas
– Itsik Mauyhas, Commented Feb 28, 2017 at 10:11
@ItsikMauyhas would you mind to provide a minimal working copy including your JS? — Gangadhar Jannu
– Gangadhar Jannu, Commented Feb 28, 2017 at 12:29

Gangadhar Jannu · Accepted Answer · 2017-02-28 13:09:22Z

I've tailored your example with one input elements and made the fiddle and it is working without any issues.

I guess the issue is with other input elements. Try to debug with {{formsToSign.$error}} to find the error

HTML

<div ng-controller="MyController as vm">
  <form name="formsToSign" novalidate class="form-validation">
    <div class="row">
      <div class="col-xs-12 form-group">
        <div class="col-xs-4">
          <label>mail {{vm.isMailReqired}}</label>
          <input ng-required="vm.isMailReqired" pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox" ng-disabled="!vm.isMailReqired"
          ng-model="vm.model.emails.beitEsek" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="pull-left">
        <!--Show this button when form is valid only -->
        <button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="formsToSign.$invalid" class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
      </div>
    </div>
  </form>
  <p>
    <b>{{formsToSign.$error}}</b>
  </p>
</div>

JS

angular
  .module('myApp', []);
angular
  .module('myApp')
  .controller('MyController', MyController);
MyController.$inject = [];

function MyController() {
  var vm = this;
  vm.isMailReqired = true;
}

mehul kumar · Accepted Answer · 2017-02-28 10:24:14Z

0

$invalid boolean True if at least one containing control or form is invalid.

mail ()\[\]\.,;:\s@\']+(\.[^()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^()[\]\.,;:\s@\']+\.)+[^()[\]\.,;:\s@\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox"ng-disabled="vm.model.signAgreement"ng-model="vm.model.emails.beitEsek">

answered Feb 28, 2017 at 10:24

mehul kumar

326 bronze badges

Collectives™ on Stack Overflow

Angular form - disable validation by ng-required

2 Answers 2

HTML

JS

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

JS

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related