Eri*_*fin 7 forms validation required angularjs angularjs-forms
即使我的所有输入字段都是空白,我的表单也显示为有效.我在输入字段中有必需的关键字.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="/components/angular/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<main>
<div class="container">
<div class="row">
<section ng-controller="LogInController as loginCtrl">
<form name="signUpForm" action="/createuser" method="POST" novalidate>
<fieldset>
<div class="field input-field">
Email <br />
<input type="email" name="email" required />
</div>
<div class="field input-field">
Password <br />
<input type="password" name="password" required />
</div>
<div class="field input-field">
Confirm Password <br />
<input type="password" name="confirmation" required />
</div>
!! -- Form valid? {{signUpForm.$valid}} -- !!
<div class="actions">
<input type="submit" value="Sign Up" />
</div>
</fieldset>
</form>
</section>
</div>
</div>
</main>
</body>
</html>
在浏览器中加载这导致!! - 表格有效吗？真的 - !! 我认为angular知道所需的标签使空白字段无效？
您应该ng-model在每个字段上放置以在每个字段上启用表单.除非您添加ng-model&name有价值,否则您的字段将永远不会被视为表单的一部分.并且更改一件事创建一个父变量,例如form&在其中添加所有范围变量.像控制器做$scope.form = {};&然后在UI添加所有ng-models到什么样子form.email,form.password和form.confirmation.
为了更好的表单验证action,method从表单和use ng-submit指令中删除&属性,该指令将调用控制器方法之一.通过检查表格是否从该控制器方法调用帖子$valid.
标记
<form name="signUpForm" ng-submit="submit(signUpForm, form)" novalidate>
<fieldset>
<div class="field input-field">
Email
<br />
<input type="email" name="email" ng-model="form.email" required />
</div>
<div class="field input-field">
Password
<br />
<input type="password" ng-model="form.password" name="password" required />
</div>
<div class="field input-field">
Confirm Password
<br />
<input type="password" ng-model="form.confirmation" name="confirmation" required />
</div>
!! -- Form valid? {{signUpForm.$valid}} -- !!
<div class="actions">
<input type="submit" value="Sign Up" />
</div>
</fieldset>
</form>
调节器
$scope.submit = function(form, formData) {
if (form.$valid) { //submit form if it is valid
$http.post('/url', {
data: formData
})
.success(function() {
//code here
})
.error(function() {
})
} else {
alert("Please fill all required fields")
}
}
希望这已经清除了你关于形式的小概念,谢谢.
| 归档时间： |
|
| 查看次数： |
9041 次 |
| 最近记录： |