javascript - Angular 形式 - 禁用 ng-required 验证

Question

我的表单中有一个电子邮件字段:

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

在我的 Controller 中，vm.isMailReqired 设置为 false，但 emailBox.$invalid 仍然为 true，因此我的表单 Controller (formsToSign) 为 false - formsToSign.$valid:false。

编辑 - 整个表单

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

感谢您的帮助。

Answer 1

我用一个输入元素定制了您的示例，并制作了 fiddle它正在工作，没有任何问题。

我猜问题出在其他输入元素上。尝试使用 {{formsToSign.$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;
}