AngularJS 不会验证 ng-show 隐藏的表单元素上的输入

Posted

技术标签:

【中文标题】AngularJS 不会验证 ng-show 隐藏的表单元素上的输入【英文标题】:AngularJS won't validate input on form elements that are ng-show hidden 【发布时间】:2016-12-27 06:15:01 【问题描述】:

我正在制作一个像手风琴一样的注册表单,每次我通过隐藏表单的第一部分并使用 ng-show 扩展下一个部分来进行下一步注册时,vm.registerForm.(elementName ) 未定义。根据我在文档中阅读的内容,角度仅将一个类应用于这些元素,那么为什么在最后一步验证表单时它们未定义?

我找不到任何关于此的文档。

html 模板:

<form name="vm.registerForm">
<div class="accordion">
  <div class="accordion-section expanded"
       ng-show="vm.formList.indexOf('playerInfo') != -1 || vm.formList.indexOf('login') != -1">
    <div class="section-title" ng-click="vm.gotoMode('playerInfo')">User info</div>
    <div class="section-content" ng-show="vm.mode.playerInfo || vm.mode.login">

      <div class="flex-form">
        <div class="flex-form-group" ng-if="vm.mode.playerInfo">
          <label>Already have an account? Just log in!</label>
          <div class="button" ng-click="vm.gotoMode('login')">Log in</div>
        </div>
        <div class="flex-form-group dummy"></div>
        <div class="flex-form-group dummy"></div>
        <div class="flex-form-group dummy"></div>
      </div>

      <div class="flex-form" ng-if="vm.mode.playerInfo">
        <div class="flex-form-group">
          <label for="user_name">Username</label>
          <input username-checker type="text" ng-model="vm.username" name="user_name">
        </div>
        <div class="flex-form-group">
          <label for="first">First name</label>
          <input type="text" ng-model="vm.firstName" name="first" ng-required="true">
        </div>
        <div class="flex-form-group">
          <label for="last">Last name</label>
          <input type="text" ng-model="vm.lastName" name="last" ng-required="true">
        </div>
        <div class="flex-form-group" ng-if="vm.gameManager.game.name == 'League of Legends'">
          <label for="summoner">Summoner Name</label>
          <input type="text" ng-model="vm.summoner" name="summoner" summoner>
          <br>
        </div>
        <div class="flex-form-group">
          <label for="email">Email</label>
          <input type="email" ng-model="vm.email" name="email" ng-required="true">
        </div>
        <div class="flex-form-group">
          <label for="birthday">Day of birth (MM/DD/YYYY)</label>
          <input type="text" ng-model="vm.birthday" name="birthday" ng-required="true" birthdate>
        </div>
        <div class="flex-form-group">
          <select ng-model="vm.sex" name="sex" ng-required="true">
            <option value="">Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
            <option value="not_specified">Prefer not to answer</option>
          </select>
        </div>
        <div class="flex-form-group">
          <label for="zip">Zip code</label>
          <input type="text" ng-model="vm.zip" name="zipcode" ng-required="true" zipcode>
        </div>
        <div class="flex-form-group">
          <label for="phone">Phone number (optional)</label>
          <input type="text" ng-model="vm.phone" name="phone" ng-required="false" phone-number>
        </div>
        <div class="flex-form-group">
          <label for="password">Password</label>
          <input type="password" ng-model="vm.password" name="password" ng-minlength="6" ng-maxlength="20">
        </div>
        <div class="flex-form-group">
          <label for="password2">Password (again)</label>
          <input type="password" ng-model="vm.password2" name="password2" ng-minlength="6" ng-maxlength="20">
        </div>
        <div class="flex-form-group">
          <div class="checkbox-holder">
            <input class='checkbox' type="checkbox" name='showPlayerName' ng-model="vm.showPlayerName">
            <label for="full_name">Show Real Name on Bracket</label>
          </div>
        </div>
        <div class="flex-form-group">
          <div class="checkbox-holder">
            <input class='checkbox' type="checkbox" name='type' value="true" ng-model="vm.type">
            <label for="spec">Spectator</label>
          </div>
        </div>
        <div class="flex-form-group">
          <div class="checkbox-holder">
            <input class='checkbox' type="checkbox" id='accept' value="true" ng-required="vm.regMode != 'user'"
                   ng-model="vm.accept">
            <label for="accept">Accept Terms of Service</label>
          </div>
        </div>
        <div class="flex-form-group">

          <a class="aside-link" href="" ng-click="vm.showTOS = true">View TOS</a>
        </div>
      </div>

      <!-- Continue -->
      <div class="button" ng-click="vm.next()" ng-if="!(vm.formList.length - 1 == vm.modeIterator)">
        Next
      </div>

      <!-- If there aren't anymore steps to complete -->
      <div class="button" ng-click="vm.next()" ng-if="(vm.formList.length - 1 == vm.modeIterator)">
        Confirm
      </div>
    </div>
  </div>
  <div class="accordion-section" ng-class="expanded: vm.mode.teams" ng-if="vm.formList.indexOf('payment') != -1">
    <div class="section-title" ng-click="vm.gotoMode('teams'); vm.gotoTeamMode('preference')">Teams</div>
    <div class="section-content">
    ...
    </div>
  </div>
</div>

验证码:

function userFormValid() 
  var valid = false;
  if (vm.regMode == "user") 
    valid = true;
   else if (vm.regMode == "anon" || vm.regMode == "admin") 
    // All the parts of the form.
    valid = vm.registerForm.zipcode.$valid && vm.registerForm.first.$valid && vm.registerForm.last.$valid;
    valid &= vm.registerForm.email.$valid && vm.registerForm.sex.$valid && vm.registerForm.birthday.$valid;
    valid &= (vm.accept == true) && vm.registerForm.user_name.$valid && vm.registerForm.password.$valid;
    valid &= vm.password == vm.password2;
    valid &= vm.registerForm.password2.$valid;

    // Let's show a message if this is invalid
    if (vm.password != vm.password2) 
      vm.showMessage('Passwords must match.');
      return false;
    
  


  return valid;

在注册结束时运行上述函数将不会显示任何定义的元素。

【问题讨论】:

当您的值未定义时,vm.mode.playerInfo 的值是多少? vm.mode.playerInfo 在未定义值时为假。一直在查看 angular.js 库,查看 NgModelController 和 FormController 试图查看这些值将在何处以及为什么会因 ng-show 切换而被删除。 看来你已经找到了……哇。不敢相信我先查看了库.... 【参考方案1】:

我忽略了一个 ng-if,它位于 DOM 的更下方。如果有人想知道,除非元素的子范围被破坏,否则 angular.js FromController 不会删除 NgModelController。

【讨论】:

以上是关于AngularJS 不会验证 ng-show 隐藏的表单元素上的输入的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS:ng-show / ng-hide 不适用于` `插值

AngularJS ng-show 在 colgroup 标签上

AngularJS学习之旅—AngularJS HTML DOM(十三)

AngularJS:使用 css 过渡动画 ng-hide / ng-show li 的高度

angularJs十个面试题

angularJS中的ng-showng-if指令