在angularjs中输入有效时添加类
add class when input is valid in angularjs
我的angularjs表单中有一个错误。当angularjs表单的输入有效时,我想更改元素的类,如果无效,我想将其改回。
我得到了这个代码:
<li data-ng-class="{ success: userFormRegistration.email.$valid, danger: userFormRegistration.email.$invalid }" class="danger">valid email</li>
现在这是电子邮件的输入:
<input type="email" name="email" data-ng-model="userFormRegistration.email" class="form-control ng-pristine ng-invalid ng-invalid-required ng-invalid-email" placeholder="Email" required="">
一开始添加的类是danger
,但当我输入有效的电子邮件时,它正在删除该类,但没有添加success
类。。
这是angularjs代码:
// app.js
// create angular app
var FormApp = angular.module('FormApp', []); ;
// create angular controller
/*FormApp.controller('registrationFormController', function ($scope, $http) {*/
function registrationFormController($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.userFormRegistration = {};
// function to submit the form after all validation has occurred
$scope.submitForm = function (form) {
// check to make sure the form is completely valid
if (form.$valid) {
$scope.userFormRegistration = { actionname: "registration", email: $scope.userFormRegistration.email, password: $scope.userFormRegistration.password }
// start ajax call
$http({
method: 'POST',
url: 'Registration.php',
data: $.param($scope.userFormRegistration), // pass in data as strings
headers: { 'Content-Type': 'application/x-www-form-urlencoded'} // set the headers so angular passing info as form data (not request payload)
})
.success(function (data) {
console.log(data);
if (!data.success) {
// if not successful, bind errors to error variables
$scope.errorRegistrationEmail = data.errors.email2;
$scope.errorRegistrationPassword = data.errors.password;
$scope.errorRegistrationActionname = data.errors.actionname;
$scope.registrationMessage = data.message;
}
else {
// if successful, bind success message to message
$scope.message = data.message;
}
});
//end ajax call
}
else {
if (!$scope.userFormRegistration.email.$valid) {
var error = { message: "please enter valid email" };
$scope.errorRegistrationMessage = error.message;
}
else if (!$scope.userFormRegistration.password.$valid) {
var error = { message: "please enter valid password " };
$scope.errorRegistrationMessage = error.message;
}
}
};
};
请给我建议。
$valid和$invalid属性来自表单,而不是输入值。您需要一个有名称的表单元素,然后在输入中输入名称,然后使用formName.inputName.$valid或$invalid。
相关文章:
- javascript/jQuery:在title中添加换行符——在IE9中有效,但在IE8中无效
- 什么's是在IE8+中添加元素的最有效方法
- 当屏幕尺寸较小时,可使用Javascript向移动菜单添加链接.不再有效
- MVC $.ajax 调用从不对编辑执行控制器操作,但在添加时有效
- 无法在 jquery .append() 方法中的按钮中添加类或 id 以制作有效的按钮
- 当我添加警报(“现在它可以工作”);这个函数有效,但我不想要这个
- 在Javascript中添加事件的正确和最有效的方法
- Javascript 在 foreach 循环中添加事件侦听器,只有最后一个条目有效
- 如何有效地将多个子 Dijit 小部件添加到 LayoutContainer
- 将活动类添加到基于URL的导航菜单仅在发出警报时有效
- 在使用javascript添加更多行的表单中,只有一行有效
- 在angularjs中输入有效时添加类
- 这些在JavaScript中向现有对象添加属性的方法有何不同(一种有效,一种无效)
- 如何使用SilverStripe有效地在表单上的提交按钮中添加额外的自定义JQuery功能
- map area:onfocus=blur()在IE中有效,但现在为Firefox添加了一个大纲
- 标题元素获胜't在添加javascript后显示,但在删除它时有效
- Javascript有效地从JSON构建表并将其添加到DOM
- 如何有效地添加?在我用JavaScript创建的表单中添加许多字段
- 更有效地添加JavaScript变量
- 向JavaScript Event添加有效负载