I am displaying a form in a modal. But when I click on the text input field it is not allowing me to enter text. similarly unable to change/select radio buttons
But when trying with "tab" it is working.
code
<form role="form" name="basicDetails" class="form-validation">
<div class="col-sm-6 b-r">
<h3 class="m-t-none m-b font-thin">Basic Details</h3>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Enter Email" ng-model="email" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" placeholder="Enter User Name" ng-model="username" ng-pattern="/^[a-zA-Z ]{1,17}$/" required>
</div>
</div>
<div class="checkbox m-t-lg">
<button type="submit" class="btn btn-sm btn-success pull-right text-uc m-t-n-xs" ng-click="ok()"><strong>UPDATE</strong></button>
<button type="submit" class="btn btn-sm btn-danger pull-right text-uc m-t-n-xs" ng-click="close()"><strong>CLOSE</strong></button>
</div>
</form>
inspect element shows
Can someone help me to trace the issue.
Related
How can I use bootstrap modal dialogs with AngularJS using ui-bootstrap with angular-ui-router? I am new to AngularJS and tried searching the documentation without luck.
I have used this code but the contents behind gets covered:
my main.html :
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<img src="img/dsd.png" style="width: 17px">
</button>
</span>
</div>
<a class="btn btn-success" ui-sref="app.login">Login</a>
<a class="btn btn-danger" ui-sref="app.register">Regiter</a>
</form>
my app.js:
angular.module("myApp",["ngAnimate","ngSanitize","ui.router","ui.bootstrap","mds"])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("app",{
url:"/app",
views:{
main:{
templateUrl:"templates/main.html",
controller:"appCtrl"
}
}
})
.state("app.register",{
url:"/register",
views:{
sub:{
templateUrl:"templates/register.html",
controller:"registerCtrl"
}
}
})
my modal:
<div id="y" class="modal-dialog">
<div>
<div class="modal-content">
<div class="modal-header btn-danger">
x
SignUp
</div>
<div class="modal-body">
<form ng-submit="register()">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" ng-model="Name" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" ng-model="UserName" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" class="form-control" ng-model="Phone" required>
</div>
<div class="form-group">
<label>Full Address</label>
<textarea class="form-control" ng-model="addr" required></textarea>
</div>
<div class="form-group">
<label>Email address:</label>
<input type="email" class="form-control" ng-model="Email" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" ng-model="Pwd" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
Sudan Store.
</div>
</div>
</div>
</div>
One approach is to use the appendTo option:
From the Docs:
$uibModal's open function
options parameter
appendTo (Type: angular.element, Default: body: Example: $document.find('aside').eq(0)) - Appends the modal to a specific element.
Use the appendTo option to append to an element that will be fully visible.
For more information, see
UI-Bootstap modal Directive API Reference
When I reload the browser and show login page. Two input field for username and password are autofill with chrome.
But the login button is greyout and show "not allowed" cursor when hover on.
If I click anywhere in the page, the login button will be enable.
Here is my code for login form:
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
</form>
You may try autocomplete false.
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address" autocomplete="false">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password" autocomplete="false">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
I have a form with multiple buttons. I want to have two different submit functions for each button. How can I achieve this?
<form id="loginForm" name="loginForm" ng-submit="submitForm()">
<div class="form-group">
<input type="text" class="form-control" id="userCompany" placeholder="Company" ng-model="user.companyId" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="userUsername" placeholder="Username" ng-model="user.userId" required>
</div>
<div class="form-group">
<input type="password" class="form-control" id="userPassword" placeholder="Password" ng-model="user.password" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button class="btn btn-default">Change Password</button>
<span ng-show="errorData">{{errorData}}</span>
</form>
I'm trying to make Change Password do changePassword() instead.
Remove ng-submit from your form element, and use ng-click on your two buttons:
<button type="button" class="btn btn-default" ng-click="submitForm()">Submit</button>
<button type="button" class="btn btn-default" ng-click="changePassword()">Change Password</button>
You need to specify that it's not a submit button, by adding a type="button" to it.
<button type="button" ng-click="changePassword()" class="btn btn-default">Change Password</button>
In my form with tag <form name="applyform" ng-submit="processForm(applyform.$valid)" class="form-horizontal" novalidate>
I have a radio button group, one option selected is required.
I'm unable to get this working.
<div class="form-group noMargin">
<label for="aanhef" class="col-sm-2 control-label">Aanhef:</label>
<div class="col-sm-10">
<div class="btn-group" data-toggle="buttons">
<p ng-show="applyform.aanhef.$invalid" class="help-block">
test
</p>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Dhr." value="Dhr." ng-required="!aanhef"> Dhr.
</label>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Mevr." value="Mevr." ng-required="!aanhef"> Mevr.
</label>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Fam." value="Fam." ng-required="!aanhef"> Fam.
</label>
</div>
</div>
</div>
Is it possible to make use of the angularJS validation tools without wrapping the controls in a form, and what would this be called?
Normal angularjs form validation example:
<form name="form" class="form-validation">
<p class="text-muted">Please fill the information to continue</p>
<div class="form-group">
<label>Username <em class="text-muted">(allow 'a-zA-Z0-9', 4-10 length)</em></label>
<input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" ng-model="user.email" required >
</div>
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Submit</button>
</form>