AngularJSは、ng-show hiddenのフォーム要素の入力を検証しません。

Question

私は登録フォームのようなアコーディオンで作業しています。登録の次のステップに進むたびに、フォームの最初の部分を隠して次に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; 
} 

登録の最後に上記の関数を実行するには、要素のいずれかが表示されません。

Answer 1

私はそれがDOMのさらに下にあるng-ifを見落としました。もし誰かが不思議に思うのであれば、要素の子スコープが破壊されない限り、angular.js FromControllerはNgModelControllerを削除しません。