[英]add class when input is valid in angularjs
I have a bug in my angularjs form. 我的angularjs表单中有一个错误。 I want to change the class of an element when the input from the angularjs form is valid and change it back if its invalid. 我想在angularjs表单的输入有效时更改元素的类,如果无效则将其更改回。
I got this code: 我得到以下代码:
<li data-ng-class="{ success: userFormRegistration.email.$valid, danger: userFormRegistration.email.$invalid }" class="danger">valid email</li>
Now this is the input of the email: 现在,这是电子邮件的输入:
<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="">
In the beginning the class added is danger
but when i enter a valid email it is deleting the class but not adding the success
class.. 一开始添加的类是danger
但是当我输入有效的电子邮件时,它将删除该类但不添加success
类。
Here is the angularjs code: 这是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;
}
}
};
};
Your advice please. 请给您建议。
The $valid and $invalid properties come from the form and not from the value of the input. $ valid和$ invalid属性来自表单,而不来自输入的值。 You need a form element with a name, then also a name into the input, and then use formName.inputName.$valid or $invalid. 您需要一个带有名称的表单元素,然后在输入中添加一个名称,然后使用formName.inputName。$ valid或$ invalid。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.