Here is a plunker link of my code where it's shown that autofocus doesn't work
http://jsfiddle.net/05hq7shr/118/
<div ng-form="exampleForm" class="form-horizontal">
<input type="text" autofocus type="text" aa-field-group="myName" required />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button aa-submit-form="save()" class="btn btn-default">Save</button>
</div>
</div>
</div>
using javascript you can focus the input on page load.
window.onload = function() {
document.getElementById("autoInput").focus();
};
<input type="text" id="autoInput" type="text" aa-field-group="myName" required />
demo
Strange , Don't know the reason but by removing
aa-field-group="myName"
from the input filed focus will work
Related
I am having problem in assigning the value to form which in Angular JS, On click of the edit i am assigning values to form fields using the ngModel. I am getting the error in chrome for input type file
could you help me in finding the solution for this.
This is my HTML Code, binding with ng-model
<div class="col-xs-4">
<div class="height:100%;">
<input type="file" ng-model="addmaterials.vray_mat_file" name="material_vray_mat" id="material_vray_mat" class="hidden" required="" ng-model-options="{ allowInvalid: true }"/>
<label class="mat_file" for="material_vray_mat" >Upload Mat file</label>
</div>
</div>
<div class="col-xs-4">
<div class="height:100%;">
<input type="file" required="" ng-model="addmaterials.vray_sbsar_file" name="material_vray_sbsar" id="material_vray_sbsar" ng-disabled="!addmaterials.createdWithSubstance" class="hidden" >
<label class="mat_file" for="material_vray_sbsar" >Upload Sbsar</label>
</div>
</div>
<div class="col-xs-4">
<div class="height:100%;">
<input type="file" required="" onchange="angular.element(this).scope().setVrayPrevImg(this)" ng-model="addmaterials.vray_prev_img" name="material_vray_prev" id="material_vray_prev" class="hidden" >
<label class="mat_file" for="material_vray_prev" >Upload Preview</label>
</div>
</div>
I wanna give required validation to a group of checkboxes formed using ng-repeat. So far I have tried
<div class="radio radio-info radio-inline" ng-repeat="styp in ship_type_list">
<div>
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" required>
<label for="input_ship_type{{styp.id}}"> {{styp.name}} </label>
</div>
<div ng-show="orderForm.$submitted || orderForm.ship_type.$touched">
<span ng-show="orderForm.ship_type.$error.required" class="text-danger">Select ship type.</span>
</div>
</div>
Still unable to validate. Thanx in adv.
User ng-required for validation
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" ng-required="value.length==0">
What problem you face I don't understand. But, I solved the issues I faced in your code. This is the plunker
<form name="orderForm" ng-submit="call()">
<div class="radio radio-info radio-inline" ng-repeat="styp in ship_type_list">
<div>
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" required>
<label for="input_ship_type{{styp.id}}"> {{styp.name}} </label>
</div>
</div>
<div ng-show="orderForm.$submitted || orderForm.ship_type.$touched">
<span ng-show="orderForm.ship_type.$error.required" class="text-danger">Select ship type.</span>
</div>
<button type="submit">submit</button>
</form>
All the best.
Check the array length in the ng-required attribute of the checkboxes.
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" ng-required="value.length==0">
So for some reason I am only getting the password on click. I've tried moving the div around. I used a div instead of a form. Been trying to figure this out. Please Help.
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-3">
<form class="form-login">
<h4>Welcome</h4>
<input type="text" ng.model="vm.user.name" class="form-control input-sm chat-input" placeholder="username" />
</br>
<input type="text" ng-model="vm.user.password" class="form-control input-sm chat-input" placeholder="password" />
</br>
<div class="wrapper">
<span class="group-btn">
<button type="submit" ng-click="vm.authenticate(vm.user)" class="btn btn-primary btn-md">login <i class="fa fa-sign-in"></i></a>
</span>
</div>
</form>
</div>
</div>
Hya you used ng.model instead of ng-model :3
And a long day it has been indeed
My form is as shown below. But on click of submit button the form is submitting with out validation...I am using spring security so xhr call won't allow to redirect on another page from server(so I have to give the url in action). If I remove "novalidate" page is taking default html validation
<form name="loginForm" id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" novalidate>
<div class="panel-body">
<div class="form-group has-feedback">
<input type="email" name="j_username" ng-model="j_username"
class="form-control placeholder-color" placeholder="Email"
ng-pattern="/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/"
required autocomplete="off" />
<div class="form-devider"></div>
<div ng-messages="loginForm.j_username.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.email.required" />
</div>
<div class="has-error" ng-message="pattern">
<spring:message code="peak.enter.valid.email" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<input type="password" name="j_password" id="j_password"
placeholder="Password" class="form-control placeholder-color"
ng-model="j_password" required autocomplete="off" /> <%-- <input
type="hidden" name="url" id="url" placeholder="Password"
ng-model="link"
ng-init="link='${pageContext.request.contextPath}/j_spring_security_check'" /> --%>
<div class="form-devider"></div>
<div ng-messages="loginForm.j_password.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.password.required" />
</div>
</div>
</div>
</div>
<div id="login-error-box1" style="display: none"></div>
<button type="submit"
class="btn btn-block custome-btn-orange pbi-mt15">
<spring:message code="peak.login" />
</button>
</form>
Thanks in advance
Take a look at this plnkr : http://plnkr.co/edit/rZaKXEp7vspvEerFtVH8?p=preview
$scope.validate = function(isValid,$event){
console.log(isValid);
console.log($scope.loginForm);
if(!isValid){
$event.preventDefault();
}
}
You need to create an angular controller with a function to run on ng-submit. That function will look for if form is invalid and stops it from posting the form.
which allows you to see your error messages.
My html is
My html is
<form name="signInForm" novalidate="">
<div class="form-group has-feedback has-feedback-left">
<label class="control-label sr-only">Email address</label>
<input type="email" class="form-control" name="username" placeholder="Email address" required="" data-ng-model="user.username" data-ng-trim="false"/>
</div>
<div class="form-group clearfix">
<div class="pull-right">
<button type="submit" class="btn btn-primary submit-button" data-ng-click="signIn()">
<span class="submit-button-text">Sign in</span>
</button>
</div>
</div>
</form>
Controller :
$scope.signIn = function(isValid) {
$log.log("username is" + $scope.user.username + $scope.user.password);
}
when I clicked sign in button , mu user name white spaces are trim off. But I want that white spaces in my user name should retain so that I can track it and displayed error message.
So I used 'data-ng-trim = false' .
But it seems its not working.
Please help.
Unfortunately there ng-trim doesn't apply to input type="email". What you can do is change the input to type="text" in order to use the ng-trim, but this solution is not ideal.
See the Angular documentation for input type=email
You have to use ng-trim="false":
<input type="email" class="form-control" name="username"
placeholder="Email address" required=""
data-ng-model="user.username"
ng-trim="false"/>
If it is not working for you, please update you angularjs version here.