I'm having a style problem with my modal.
Here's the code of my modal :
<script type="text/ng-template" id="contact">
<div class="modal-header">
<i class="fa fa-paper-plane"></i> Contact
<a ng-click="closeModal()" style="float: right;"><i class="fa fa-times text-danger"></i></a>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<input class="col-md-6" type="text" ng-model="contact.name" placeholder="{{ data.contact.name }}" required />
<input class="col-md-6" type="email" ng-model="contact.mail" placeholder="{{ data.contact.mail }}" required />
<input type="text" ng-model="contact.subject" placeholder="{{ data.contact.subject }}" required />
<textarea ng-model="contact.message" rows="5" placeholder="{{ data.contact.desc }}" required></textarea>
<form>
</div>
<div class="modal-footer">
The Footer Goes There
</div>
</script>
What am I doing wrong ?
EDIT :
I'm using Bootstrap 3.1.1 & UI-Bootstrap 0.11.0,
Add class="form-control" to your inputs.
<div class="modal-body">
<form class="form-horizontal" role="form">
<input class="form-control col-md-6" type="text" ng-model="contact.name" placeholder="{{ data.contact.name }}" required />
<input class="form-control col-md-6" type="email" ng-model="contact.mail" placeholder="{{ data.contact.mail }}" required />
<input class="form-control" type="text" ng-model="contact.subject" placeholder="{{ data.contact.subject }}" required />
<textarea class="form-control" ng-model=" contact.message" rows="5" placeholder="{{ data.contact.desc }}" required></textarea>
</form>
</div>
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
<div class="row">
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>First Name</label>
<div class="input-group">
<input type="text" tabIndex="1" name="first_name" class="form-control">
</div>
</div>
<div class="form-group">
<label>Email Address</label>
<div class="input-group">
<input type="email" tabIndex="3" name="username" class="form-control" ng-model="username" required user-exist /><br/> <span style="color: red" ng-show="partnerForm.username.$touched && partnerForm.username.$invalid">
<span ng-show="partnerForm.username.$error.required">Email is required.</span>
<span ng-show="partnerForm.username.$error.email">Enter Correct Format.</span>
<span ng-show="partnerForm.username.$error.userExist">User already exists.</span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>Last Name</label>
<div class="input-group">
<input type="text" tabIndex="2" name="last_name" class="form-control">
</div>
</div>
</div>
</div>
</div>
the tabindex 3 is not working.i have checked by removing the required attr then it is working .the attributes required and tabindex is conflicting with each other.please help me to solve this.or provide a directive (working) for tabindex.
So, I have a parent form with a nested set of ng-forms like this:
<form class="row" name="parentForm" ng-repeat="model in controller.addresses track by $index" novalidate>
<div class="col-xs-12 row-title">
<h1>{{ model.type || 'Delivery' }} address</h1>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4">
<div class="form" name="saveForm" ng-form>
<div class="form-group">
<label class="control-label">Company name</label>
<input class="form-control" name="company" type="text" placeholder="Enter your company name" ng-model="model.company" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.address1.$invalid && !saveForm.address1.$pristine }">
<label class="control-label">House name/number</label>
<input class="form-control" name="houseName" type="text" placeholder="Please enter your address 1" ng-model="model.houseName" ng-minlength="3" required />
</div>
<div class="form-group">
<label class="control-label">Street</label>
<input class="form-control" name="street" type="text" placeholder="Please enter your address 2" ng-model="model.street" />
</div>
<div class="form-group">
<label class="control-label">Town</label>
<input class="form-control" name="town" type="text" placeholder="Please enter your address 3" ng-model="model.town" />
</div>
<div class="form-group">
<label class="control-label">County</label>
<input class="form-control" name="county" type="text" placeholder="Please enter your address 4" ng-model="model.county" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.postCode.$invalid && !saveForm.postCode.$pristine }">
<label class="control-label">Post code</label>
<input class="form-control" name="postCode" type="text" placeholder="Enter your post code" ng-model="model.postCode" ng-minlength="3" required />
</div>
</div>
</div>
</form>
I then have a button:
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-4">
<div div class="row">
<div class="col-xs-6 tile">
<a class="red" ui-sref="^">
<i class="fa fa-trash"></i>
<div class="footer">Back</div>
</a>
</div>
<div class="col-xs-6 tile" ng-if="parentForm.$valid">
<a class="yellow" ui-sref="^.finance">
<i class="fa fa-arrow-right"></i>
<div class="footer">Continue</div>
</a>
</div>
</div>
</div>
</div>
I want this button to only show if all child forms are valid. I was hoping that I could just use parentForm.$valid but that doesn't work.
Does anyone know how to solve this?
Try to do parentForm.saveForm.$valid.
It will work
Nested forms aren't valid in HTML5 - but you can place your saveForm outside the parentForm and then use the input element's form attribute to specify a form for your input elements.
<form name="form1">
<input type="string" ng-model="form1input" required>
<input type="string" form="form2" ng-model="form2input" required>
</form>
<div ng-form="form2" id="form2"></div>
<button ng-if="form1.$valid && form2.$valid">Click</button>
Plunker: https://plnkr.co/edit/y9ipsNoEW596guLf2CzM?p=preview
I have two forms on a single page. One form I am adding/deleting which is working fine. Now in the second form (which I don't want to do anything through angular)
But I am not able to submit this(second form). Both the forms are inside my app. Anybody have any idea please share.
I can see when I refresh the page "ng-pristine ng-valid" classes are added in my second form.
This is my first form
<div class="address address-form" ng-hide="!isEdit">
<form class="edit-address-form" ng-submit="updateAddress(currentAddress.aid);">
<div class="form-group">
<label class="sr-only" for="first_name">First name </label>
<input type="text" class="form-control" id="first_name" value="testing" name="first_name" value="{{currentAddress.first_name}}" placeholder="First name" required ng-model="currentAddress.first_name">
</div>
<div class="form-group">
<label class="sr-only" for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last name" ng-model="currentAddress.last_name" >
</div>
<div class="form-group">
<label class="sr-only" for="phone">Phone/mobile</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" ng-model="currentAddress.phone">
</div>
<div class="form-group">
<label class="sr-only" for="street">Street address</label>
<input type="text" class="form-control" id="street" name="street" placeholder="Street address" ng-model="currentAddress.street">
</div>
<div class="form-group">
<label class="sr-only" for="city">City</label>
<input type="text" class="form-control" id="city" name="city" placeholder="City" ng-model="currentAddress.city" >
</div>
<div class="form-group">
<label class="sr-only" for="postal_code">Postal code</label>
<input type="text" class="form-control" id="postal_code" name="postal_code" placeholder="Postal code" ng-model="currentAddress.postal_code" >
</div>
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" placeholder="Country" autofocus ng-model="currentAddress.country">
</div>
<div class="form-group">
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<div class="alert alert-success" role="alert" ng-show="successMsg">{{successMsg}}</div>
<button type="submit" class="btn btn-lg btn-primary btn-block" id="button-update-address" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Updating address...">Update address</button>
</div>
</form>
</div>
This one second form
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Payment Summary</h3>
</div>
<div class=" ">
<form id="confirm-order" name="confirm_order" method="POST" action="">
<div class="form-group">
<?php
if($con->returned_rows):
$row = $con->fetch_assoc();
?>
<table class="table">
<tr>
<td> Sub total </td>
<td><?php print $row['subtotal'] ;?><input type="hidden" name="subtotal" value="<?php print $row['subtotal'] ;?>"/></td>
</tr>
<tr>
<td>Total items </td>
<td><?php print $row['total_qty'] ;?></td>
</tr>
<tr>
<td>Shipping</td>
<td><?php //print $row['total_qty'] ;?></td>
</tr>
</table>
<?php endif; ?>
</div>
<div class="form-group">
<input type="submit" name="confirm" class="btn btn-lg btn-primary btn-block" value="Confirm order"/>
</div>
</form>
</div>
angular has directive named form, because of which it considers your form directive in angular-scope.
if you want this directive to be out of angular-scope, use ngNonBindable
<form ng-non-bindable>
.....
</form>
I have below form:
<form name="commentForm" class="form-horizontal" role="form" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" >Enter Name:</label>
<div class="col-sm-10" show-errors>
<input type="text" class="form-control" id="name" name="name" ng-model="subject.name" placeholder="Enter Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Enter comment:</label>
<div class="col-sm-10" show-errors>
<textarea class="form-control" rows="5" id="comment" name="comment" ng-model="subject.text" style="resize: none;" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button ng-click="submitForm()" type="submit" class="btn btn-default" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
I have created showErrors directive to show error for required-fields.
But this form validation is not working properly. Although if I am using the same code in some other partials, it is working fine. What could be the possible mistake that I am making here?