I have this modal form to get input from user. before submitting user form, i want to check if user enter their username, name, password, confirm password, status and scope. note that status is in radio button and scope is in check box.
But the problem i encounter now is that, the user still can click the button save and it doesn't check the condition as i describe above.
<div class="modal-body">
<form name="addUser" ng-submit="(addUser.username.$valid && addUser.name.$valid && addUser.password.$valid &&
addUser.confirmpassword.$valid && addUser.status.$valid && addUser.scope.$valid) ? add() : '';">
<div class="alert alert-danger" ng-if="hasError">
<button type="button" class="close" aria-hidden="true" ng-click="setError(false);">×</button>
<strong>Error!</strong> {{errorMessage}}
</div>
<div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="username">Username</label>
<input class="form-control" name="username" ng-model="user.username" required>
<span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="name">Name</label>
<input class="form-control" name="name" ng-model="user.name" required>
<span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="password">Password</label>
<input type="password" class="form-control" name="password"
ng-model="user.password" required ng-minlength="5">
<span class="glyphicon form-control-feedback"
ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="confirmpassword">Re-enter password</label>
<input type="confirmpassword" class="form-control" name="confirmpassword"
ng-model="user.confirmpassword" required ng-minlength="5">
<span class="glyphicon form-control-feedback"
ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.status.$valid ? 'has-success' : 'has-error';">
<label for="status">Status</label><br>
<input type="radio" ng-model="user.status" name="status" value="1"> Active
<input type="radio" ng-model="user.status" name="status" value="0"> Inactive<br>
</div>
<br>
<div class="form-group has-feedback" ng-class="addUser.scope.$valid ? 'has-success' : 'has-error';">
<label for="scope">Scope</label><br>
<input type="checkbox" ng-model="user.scope.admin" name="scope[]" value="admin"> Admin <br>
<input type="checkbox" ng-model="user.scope.app" name="scope[]" value="app"> App <br>
<input type="checkbox" ng-model="user.scope.redemption" name="scope[]" value="redemption"> Redemption <br>
<br>
</div>
<div ng-switch on="isLoading">
<div ng-switch-when="true">
<button type="button" class="btn btn-primary btn-block disabled">Saving ...</button>
</div>
<div ng-switch-when="false">
<button type="submit" class="btn btn-primary btn-block" ng-click="add();" >Save</button>
</div>
</div>
</form>
</div>
Haven't tested this but looks like your ng-model is using an object 'user' for each property being captured whereas your ng-submit condition doesn't factor that in. Not sure if that's the issue but that's one thing you may want to check.
Also looks like you could do something like addUser.$valid instead of doing the full checks. You could also additionally try to disable the submit button by using
ng-disabled="addUser.$invalid".
Here's a tutorial: https://scotch.io/tutorials/angularjs-form-validation
Related
I am very new to Angular and trying to build signup form, after looking at tutorials I built this form, but its not validating.
Here is the code which I am using:
<div class="signup-cont cont form-container" ng-controller="signinSignUpController">
<form id="login-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error' : signUpForm.name.$invalid && !signUpForm.name.$pristine }">
<input type="name" name="name" id="usr-name" class="inpt form-control" placeholder="Your name" ng-model="name" ng-required="true"/>
<label class="control-label" for="name">Your name</label>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.name.$invalid "></span>
<p ng-show="submitted && signUpForm.name.$invalid" class="help-block">You name is required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error has-feedback' : submitted && signUpForm.email.$invalid}">
<label class="control-label" for="email">Your email</label>
<input type="email" name="email" class="inpt form-control" ng-model="email" placeholder="Your email" ng-required="true"/>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.email.$invalid"></span>
<p ng-show="submitted && signUpForm.email.$invalid" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error has-feedback' : submitted && signUpForm.password.$invalid}">
<label class="control-label" for="password">Your password</label>
<input type="password" name="password" class="inpt form-control" ng-model="password" placeholder="Your Password" ng-required="true"/>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.password.$invalid"></span>
<p ng-show="submitted && signUpForm.password.$invalid" class="help-block">Enter a valid email.</p>
</div>
<div class="submit-wrap">
<input type="submit" class="form-control submit-signup btn btn-black-border btn-default" ng-disabled="signUpForm.$invalid" value="SIGN UP"/>
Terms and conditions
</div>
</form>
</div>
Can someone please help me understand where I am doing wrong.
change ng-model="name" to ng-model="user.name", ng-model="password" to ng-model="user.password" and ng-model="email" to ng-model="user.email".
I have checked using plunker its working fine.
ng-show="submitted && signUpForm.name.$invalid"
What exactly is submitted here? If that is something in the controller, seems like it's set to false & failing the validation. Check out this plunk w/o the submitted flag.
I have a modal popup with few mandatory fields.
<form name="myReferenceDataForm" role="form" ng-submit="AddNewGroupMembershipReferenceRecord()" style="margin: 10px">
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupCode" class="col-sm-4 form-control-label">
Group Code <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupCode" class="form-control" id="GroupCode" type="text">
</div>
</div>
</div>
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupName" class="col-sm-4 form-control-label">
Group Name <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupName" id="GroupName" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group row">
<label for="GroupType" class="col-sm-4 form-control-label">Group Type </label>
<div class="col-sm-8">
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupType.id" ng-model="referenceAddRecord.groupType"></select>
</div>
</div>
Only above 3 fields groupName , groupCode are mandatory.
If they exist or not filled I want to have the submit button in the page disabled.
So , I did ...
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)|| addReferenceDataGroupNameExists() || addReferenceDataGroupCodeExists()" />
But it is not working . Even Only the whether the fields are filled that check is failing. Whenever I enter only one field it is getting enabled.
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)" />
What am I doing wrong here ?
Check out this plunker
<input type="submit" id="submit" ng-disabled="!(referenceAddRecord.groupName && referenceAddRecord.groupCode)" value="Submit" />
I am new to angular. When I try validate the form ng-hide is not removed from ng-show. Can some one help me to sort out this issue?
Thanks in advance.
`
<div class="panel panel-default">
<div class="panel-body">
<h3>Add Language</h3>
<form name="LanguageAddForm" ng-controller="LanguageAddController" class="form-horizontal" method="post" ng-submit="submitLanguageAddForm()" novalidate >
<div class="panel-body">
<div class="form-group" ng-class="{ 'has-error' : LanguageAddForm.name.$invalid && !LanguageAddForm.name.$pristine }">
<label class="col-md-3 control-label">Language Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="language.name" id="lang-name" ng-model="language.name" required />
<p ng-show="LanguageAddForm.name.$invalid">Please enter a valid Topic</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Status:</label>
<div class="col-md-9">
<div class="radio" ng-init="language.status=1">
<label>
<input type="radio" name="status" id="status" ng-model="language.status" ng-value="1" >Active</label>
<label>
<input type="radio" name="status" id="status" ng-model="language.status" ng-value="0" >
Not Active
</label>
</div>
</div>
</div>
<div class="btn-group pull-right">
<button class="btn btn-primary" type="button" onclick="history.back(-1)" >Cancel</button>
<button class="btn btn-primary" type="submit" ng-disabled="LanguageAddForm.$invalid" >Submit</button>
</div>
</div>
</form>
</div>
</div>
`
You can use validation message in that way.
<input type="text" class="form-control" name="language.name" id="lang-name" ng-model="language.name" ng-pattern="" required/>
<span ng-show="form_name.language.name.$error.pattern">please enter valid value</span>
for more info read this Angular validation doc
I have an input attached with datepicker. when click datepicker, date will be entered into the input. But the input remained as invalid(i have 'required' condition on input) as i did not enter anything manually. i could not submit form because of this. can we programatically make the input valid
<body ng-controller="ReservationController as resvnCtrl">
<form role="form" name="resvnCtrl.form" data-ng-submit="resvnCtrl.submitForm(resvnCtrl.form.$valid)" novalidate>
<div class="form-group" data-ng-class="{'has-error':resvnCtrl.form.time.$invalid && (resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted) }">
<label class="control-label">Date & Time</label>
<div class='input-group date' id='datetimepicker'>
<input type="text" name="time" id="time" data-ng-model="resvnCtrl.user.time"
placeholder="Enter Desired Time" class="form-control" required>
<span class="input-group-addon pointer" data-date-picker>
<i class="fa fa-calendar"></i>
</span>
</div>
<div data-ng-messages="resvnCtrl.form.time.$error" data-ng-if="resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted">
<p class="help-block" data-ng-message="required">Date & Time required</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<input type="submit" name="submit" id="submit" value="Make Reservation" class="btn btn-primary btn-block " >
</div>
</div>
</form>
</body>
here is the plunker
http://plnkr.co/edit/1l167VHFg32IkvEaDFgf?p=preview
This doesn't look any different than what I thought I would normally write when I put a form together in AngularJS, but for whatever reason ngSubmit is not working, and ngDisabled isn't disabling the button when the fields are empty. I took the section and pasted it into a new project to see if it was just acting out due to some other dependencies, but it still doesn't work even after trimming the fat. Can anyone see what is wrong, it's obvious after this amount of time I'm not going to see it myself.
I preloaded the form fields using the controller to verify that they are talking, interpolated the user data in pre tags which are bound to ng-model since I can see it update as I type, and there are no ng errors occuring, even looking at Chromes angular plugin it looks fine. But, login() is never invoked on ngSubmit and the button is never ngDisabled when the required fields are blank.
Stripped down version of the issue that still doesn't work:
<div ng-app="myApp">
<div ng-controller="LoginController as loginCtrl">
<form name="loginForm" role="form" ng-submit="loginCtrl.login()" novalidate></form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" ng-model="loginCtrl.user.username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" ng-model="loginCtrl.user.password" required>
</div>
<div class="form-group clearfix">
<button type="submit" class="btn btn-primary btn-block" ng-disabled="loginForm.$invalid">Login</button>
</div>
<pre>user data = {{loginCtrl.user | json}}</pre>
<pre>form invalid = {{loginForm.$invalid}}</pre> <!-- always says false... but it is invalid -->
</form>
</div>
</div>
<script>
(function() {
'use strict';
angular.module('myApp', [])
.controller('LoginController', [function() {
var self = this;
self.user = { username: 'asdf', password: 'asdf' };
self.login = function() {
console.log("hello world");
};
}]);
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
make sure that angular libraries are included.
https://docs.angularjs.org/misc/downloading
and have a look at these solutions
https://github.com/angular/angular.js/issues/2513
and if you like to see my working form...
<div class="col-md-10">
<form class="tab-pane active form-horizontal" id="first" name="userForm" novalidate ng-submit="save()">
<h2>Sign up</h2>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.username.$invalid}">
<label class="control-label col-md-3">UserName <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="username" class="form-control" ng-model="user.username" required placeholder="username"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Username is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.email.$invalid}">
<label class="control-label col-md-3">Email <span class="required">* </span> </label>
<div class="col-md-4">
<input type="email" name="email" class="form-control" ng-model="user.email" required placeholder="email"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Email is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.password.$invalid}">
<label class="control-label col-md-3">Password <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="password" class="form-control" ng-model="user.password" required placeholder="1.2"/>
</div>
<p ng-show="submitted && userForm.password.$error.required" class="help-block">Password is required.</p>
</div>
<div class="form-group">
<label class="control-label col-md-3">Confirm Password </label>
<div class="col-md-4">
<input type="text" name="password_confirmation" class="form-control" ng-model="user.password_confirmation"
placeholder="password_confirmation"/>
</div>
<p ng-show="submitted && userForm.password_confirmation.$invalid" class="help-block">password_confirmation is required.</p>
</div>
<div class="form-group">
<div class="pull-left">
<a class="btn btn-default" href="/app/assets/images"> Back</a>
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button>
</div>
</div>
</form>
</div>