CODEWITHSUNDEEP
javascriptangularjsforms
Itsik Mauyhas
Itsik Mauyhas

Reputation: 4004

Angular form - disable validation by ng-required

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.

Upvotes: 0

Views: 962

Answers (2)

Gangadhar Jannu
Gangadhar Jannu

Reputation: 4454

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;
}

Upvotes: 1

mehul kumar
mehul kumar

Reputation: 34

$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">

Upvotes: 0

Related Questions