I would like to set invalid with angular when firstname is equals to lastname and change the color using styles to red.
http://jsbin.com/japir/2
function RegoController($scope) {
$scope.app = {
firstName: "Saroj"
};
$scope.$watch("app.lastName", function(newVal, oldVal) {
if (!!$scope.app.lastName && !!newVal)
if (angular.lowercase($scope.app.firstName) === angular.lowercase(newVal)) {
debugger;
$scope.form.inputLastName.$setValidity("sameName", false);
}
});
}
<body ng-app>
<div class="container" ng-controller="RegoController">
<div class="col-lg-4">
<form name="form">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input id="inputFirstName" class="form-control" type="text" ng-model="app.firstName" placeholder="Enter your firstname" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input id="inputLastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input id="inputEmail" class="form-control" type="email" ng-model="app.email" placeholder="Enter your email" required />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
{{app}}
</div>
</div>
</body>
The problem is that you are trying to select a form input that has no name; thus making it unable to find the field you are trying to invalidate. Here is a working example:
JSBIN: http://jsbin.com/yozanado/1/
Input field with name:
<input id="inputLastName" name="lastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
Javascript:
$scope.form.lastName.$setValidity("sameName", false);
AngularJS form validation relies on the name of the form and the name of the fields to find the validation models on scope.
For example, if your HTML is:
<form name="form">
<input name="firstName" ng-model="firstName" />
</form>
You will be able to access the validation $error property on scope using the name attributes:
$scope.form.firstName.$error.sameName
To fix the issues you're having, add a name attribute to your input fields.
JSBin Demo
Related
I'm trying to bind my Controller's object values to inputs using ng-model, if I add it ng-repeat it is binding data, but if i call it directly it is not binding data to inputs. Thank you :)
Angular Controller
SMSApp.controller('studentUpdateController', function ($scope, $routeParams, GetStudentService) {
$scope.stuid = $routeParams.STUDENTID != null ? $routeParams.STUDENTID : 0;
GetStudentService.getbyId($scope.stuid).then(function (result) {
$scope.obj = JSON.parse(result);
$scope.obj = $scope.obj.Table;
console.log($scope.obj);
});
});
Console Log's
HTML Code
<div class="col-md-4 form-group">
<label>First Name</label>
<input type="text" class="form-control" ng-model="obj.FIRSTNAME" placeholder="First Name" required />
</div>
<div class="col-md-4 form-group">
<label>Middle Name</label>
<input type="text" class="form-control" ng-model="obj.MIDDLENAME" value="" placeholder="Middle Name" required />
</div>
It is because your obj is an array. If you do not want to use ng-repeat in other words if you are sure you will have only 1 item in your array you can try the following
<div class="col-md-4 form-group">
<label>First Name</label>
<input type="text" class="form-control" ng-model="obj[0].FIRSTNAME" placeholder="First Name" required />
</div>
<div class="col-md-4 form-group">
<label>Middle Name</label>
<input type="text" class="form-control" ng-model="obj[0].MIDDLENAME" value="" placeholder="Middle Name" required />
</div>
Codepen link: http://codepen.io/anon/pen/mVyPaw
Need to create an angular app (w/ 1 controller) that validates that this form has all three fields filled out & Submit button can only be enabled if the form is valid. Don't need to use the preprocessors.
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName">
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName">
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }">
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton">Submit</button>
</form>
</div>
Actually it's module inject problem. ng-app="myApp" ng-controller="formCtrl" Where is your myApp module code.
try like this.
<div class="container" ng-app>
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form" novalidate>
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required>
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-disabled="form.$invalid">Submit</button>
</form>
</div>
Add required validation
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="myForm" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required >
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton" data-ng-disabled="myForm.$invalid" >Submit</button>
</form>
</div>
Here is your edited CodePen
I have a code that should disable a button when : registerForm.$invalid || form.password != form.passwordBis, which should mean : "Disable the button if the form isn't valid OR if the '$scope.form.password' variable isn't equal to '$scope.form.passwordBis'.", isn't it?
So here I have a code that activate the button if the two passwords matches. Which shouldn't happen, because the first condition is still wrong !
HTML :
<div ng-app="app" ng-controller="formCtrl">
<form name="registerForm">
<div class="header">
<h2>Create your account</h2>
</div>
<div class="form-group">
<div class="title">First Name</div>
<input type="text" name="firstName" ng-required class="form-control" ng-class="{empty:form.firstName.length==0}" ng-model="form.firstName" required></input>
</div>
<div class="form-group">
<div class="title">Last Name</div>
<input type="text" name="lastName" ng-required class="form-control" ng-class="{empty:form.lastName.length==0}" ng-model="form.lastName" required></input>
</div>
<div class="form-group">
<div class="title">Email</div>
<input type="email" name="email" ng-required class="form-control" ng-class="{empty:form.email.length==0}" ng-model="form.email" required></input>
</div>
<div class="form-group">
<div class="title">Password</div>
<input type="password" name="password" class="form-control" ng-class="{empty:form.password.length==0}" ng-model="form.password" required></input>
<input type="password" name="passwordBis" class="form-control" ng-class="{empty:form.passwordBis.length==0}" ng-model="form.passwordBis" minlength="6" required></input>
</div>
<div ng-if="form.password != form.passwordBis" class="error">Passwords doesn't match.</div>
<div class="form-group">
<button class="btn btn-success" ng-click="register()" ng-disabled="registerForm.$invalid || form.password != form.passwordBis">Register</button><br/>
</div>
</form>
</div>
JS :
var app = angular.module("app", []);
app.controller("formCtrl", function($scope) {
$scope.form = {
firstName: "",
lastName: "",
email: "",
password: "",
passwordBis: ""
};
});
And you can test it : JSFiddle
What am I missing ?
Remove ng-required attributes from your form elements.
For form elements you should use either ng-required or required, but not both at the same time. ng-required expects an expression that needs to evaluate to true in order to mark a form element as required, whereas required doesn't need any value. See https://stackoverflow.com/a/16648851/1237995 for more detailed explanation.
its very strange that i am closing the form input field tags but even though i didn’t find it in console.even my form value didn't getting posted.
here is my code
<form ng-submit="updatepersonel()" ng-repeat="update in userDetail">
<div class="form-group">
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.firstname" />
<label for="exampleInputPassword1">First Name</label>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" ng-model="perupdate.lastname" ng-value="update.lastname" />
</div>
<div class="form-group" />
<label for="exampleInputPassword1">Phone</label>
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.phone" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control full" ng-model="perupdate.location" ng-value="update.location" />
</div>
<button class="btn btn-success" type="submit">Update</button>
</form>
Edited::
<div class="form-group">
<form ng-submit="updatepersonel()" ng-repeat="update in userDetail">
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.firstname" />
<label for="exampleInputPassword1">First Name</label>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" ng-model="perupdate.lastname" ng-value="update.lastname" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone</label>
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.phone" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control full" ng-model="perupdate.location" ng-value="update.location" />
</div>
<button class="btn btn-success" type="submit">Update</button>
</form>
</div>
i have solved my issue.
what i was doing i was trying to get the data in ng-value.
But when i try to bind data in my ng-model i get the solution
js
$scope.perupdate= {
firstname: key.firstname,
lastname : key.lastname,
phone : key.phone,
location : key.location,
};
view
<input type="text" class="form-control full" ng-model="perupdate.firstname">
I'm setting some form values on an angular form and need to have the validation trigger/set the field to dirty programmatically. The current bug requires the user to actually interact with the form field to trigger the "required" validation and to have it turn green.
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
var scope = angular.element($("#PhotoUploadForm")).scope();
scope.$apply(function(){
scope.user.firstName = response.first_name;
scope.user.lastName = response.last_name;
scope.user.email = response.email;
});
});
And here is the html
<form no-validate id="PhotoUploadForm" name='form' action="/uploaded" enctype="multipart/form-data" method="POST" role="form" ng-controller="Controller">
<div class="col-md-5">
<div class="form-group">
<label class="control-label" for="firstName" >First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName" ng-model="user.firstName" required />
</div>
<div class="form-group">
<label class="control-label" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName" ng-model="user.lastName" required />
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" ng-model="user.email" required />
</div>
</div>
</form>
You can do it this way:
angular.element('#PhotoUploadForm').scope().user.firstName.$dirty = true
Let me know if it helps.