我正在学习AngularJS,仍处于表单验证的最基本阶段。我按照official tutorial here进行操作,并设法让验证工作正常,如果输入无效,背景会改变颜色。
这一切都很好,并且算作我学习中的重要一步,但是如何进一步移动并使用验证添加/删除Bootstrap所需的CSS类来显示视觉提示?
这是我的HTML代码:
<form novalidate class="css-form">
<div class="form-group">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
<div class="form-group">
<label class="control-label" for="lname">Last Name</label>
<input type="text" id="lname" placeholder="Last Name" class="form-control" ng-model="user.lname" required >
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required >
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" required >
</div>
<div class="form-group">
<label class="control-label" for="emailpref">Want annoying emails?</label>
<select class="form-control" ng-model="user.emailpref" required>
<option value="Null">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
在Bootstrap3 documentation中,它表示如果我需要显示有效状态,我必须像这样添加has-success
的CSS类:
<div class="form-group has-success">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>
如何让我的AngularJS验证呢?目前,我的AngularJS如下:
function UserCtrl($scope) {
$scope.master = {};
$scope.user = { fname: "J", lname: "Watson", password: "test", email: "j.watson@world.com", emailpref: "Yes" };
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
非常感谢任何帮助。谢谢。
答案 0 :(得分:1)
要根据字段验证添加动态类,您需要做两件事
将表单设为name
`<form novalidate class="css-form" name="form1">`
也为每个输入字段name
。然后,您可以使用表达式来确定字段的错误状态
<div class="form-group has-success" ng-class="{'has-success':form1.fname.$invalid}">
<label class="control-label" for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required name="fname">
</div>
请仔细阅读表格指南http://docs.angularjs.org/guide/forms了解详情。
答案 1 :(得分:0)
您可以使用angular-validator。
免责声明:我是angular-validator的作者