作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在制作一个像注册表这样的 Accordion ,每次我通过隐藏表单的第一部分并使用 ng-show 扩展下一个部分来进行下一步注册时,vm.registerForm 上的元素。(elementName ) 未定义。从我在文档中读到的内容来看,angular 只将一个类应用于这些元素,那么为什么在最后一步验证表单时它们是未定义的?
我没能找到任何关于此的文档。
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;
}
在注册结束时运行上述函数将不会显示任何定义的元素。
最佳答案
我忽略了 DOM 中更靠下的 ng-if。如果有人想知道,除非销毁元素的子范围,否则 angular.js FromController 不会删除 NgModelController。
关于javascript - AngularJS 不会验证 ng-show 隐藏的表单元素的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39049979/
我是一名优秀的程序员,十分优秀!