I am trying to create a modal with form using angularjs and bootstrap.
First I created the form and now I am trying to put it to modal template but the form-control is sliding out of the modal as you can see in the link attached.
<div class="modal-header">
<h3 class="modal-title">Add New Review</h3>
</div>
<div class="modal-body">
<form role="form">
<fieldset>
<legend>Basic Information</legend>
<div class="container">
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" name="address" class="form-control col-sm-1"
ng-model="editableReview.address"
required>
</div>`enter code here`
</fieldset>
</form>
</div>
<div class="modal-footer">
<div class="col-sm-offset-10">
<input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()"/>
<input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()"/>
</div>
</div>
this is what I get:
It seems like your problem is with the div class, specifically the container. I think you should try to delete this line:
<div class="container">
(and ofcourse its closing tag: </div>, and see if it fixes your issue.
Let me know if that helps.
Related
I'm trying to disable a button using AngularJS
<button
type="submit"
ng-disabled="emailConfig.$invalid"
ng-click="createEmailconfig()"
class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg"
name="submit"
id="submit"
>
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
If the form is invalid or a specific length isn't met, the button should be disabled. However, it's not working as it's supposed to.
Can someone help me out?
all you need to do is add ng-maxlength directive to the input fields and the form will be disabled with your current code, checkout this basic working example!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<input name="input" ng-model="userType" ng-maxlength="5" required>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-click="createEmailconfig()" class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg" name="submit" id="submit">
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
</form>
</div>
some addition to #Naren Murali answer
You have no ng-model and inputs in your example.
You can validate a field using the required attribute and ng-model.
Using ng-model:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button ng-model="button" ng-disabled="modelName.$invalid">Button</button>
</form>
</div>
note: Set the novalidate attribute on the form-tag so the default HTML5 validation gets overwritten by Angular in your app.
You can validate a form using the required attribute and the form name.
For your example:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-
click="createEmailconfig()" class="yourClass" name="submit" id="submit">Submit</button>
</form>
</div>
I have the following modal, With ng-model item
<div class="uk-modal" id="modal_header_footer">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<h3 class="uk-modal-title">Editar Usuario</h3>
</div>
<form id="form_validation" class="uk-form-stacked">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="fullname">user<span class="req">*</span></label>
<input type="text" ng-model="item.user" required class="md-input" md-input />
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="fullname">name<span class="req">*</span></label>
<input id="nombre" type="text" name="nombre" ng-model="item.name" required class="md-input" md-input />
</div>
</div>
</div>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="email">Email<span class="req">*</span></label>
<input id="email" type="email" name="email" ng-model="item.email" data-parsley-trigger="change" required class="md-input" md-input />
</div>
</div>
</div>
</form>
<div class="uk-modal-footer uk-text-right">
<button type="button" class="md-btn md-btn-flat uk-modal-close">Cerrar</button>
<button type="button" ng-click="EditarUsuario(item)" class="md-btn md-btn-flat md-btn-flat-primary">Aceptar</button>
</div>
</div>
The modal call it from a button belonging to a record in datatable, "data-uk-modal="{target:\'#modal_header_footer\'}""
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
DTColumnBuilder.newColumn('estado').withTitle('Estado'),
DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
DTColumnBuilder.newColumn(null).withClass('parent').withTitle('Acciones').notSortable().renderWith(function(data,type,full){
vm.usuario[data.id] = data;
return ' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i>'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i>';
})
];
I need to pass the data parameter, and so make use of the ng-model in the modal
There is no difference between the way we use ng-model in a modal and any other part of the website.
In your case, I suppose you want to show the user's data displayed which belong to a specific record in the table.
So if your ng-model in the modal belongs to the same controller which contains the edit func, you just need to bind the information passed as parameter to the corresponding ng-model in the modal. When the modal shows up, it will show the bind information in the modal.
Let's say, in your modal you have this:
<div class="parsley-row">
<label for="fullname">user<span class="req">*</span></label>
<input type="text" ng-model="item.user" required class="md-input" md-input />
</div>
Then in your edit function you just have to say
function edit(user){
$scope.item = user; //...item is the var used for binding the information to the modal and user is the var coming from the table
}
This can solved using dummy object. here is a code
<td title="'Payment'"> <button type="button" class="btn btn-info btn-lg pay-btn" data-toggle="modal" data-target="#myModal" ng-click="mommy(obj)" >yuty</button>
<!-- Modal content-->
<div id="myModal" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<form>
<div class="form-group">
<label>Amout</label>
<input type="Number" ng-model="vvv.payment">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng- click="mono=false">Close</button>
<button type="button" class="btn btn-default" ng- click="modify(vvv._id,vvv)">Submit</button>
</div>
</div>
dummy object
$scope.mommy = function(h){
console.log(h.payment);
$scope.vvv = h;
}
hope you get to understand it,
This is better way to use it
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
I am using CakePHP 3.x
I am trying to skin a themeforest theme into a CakePHP plugin.
Midway, I am deciding whether to skin a portlet into helper, element, or view cell.
The portlet html code looks something like this:
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> More Form Samples
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4>Inline Form</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Inline Form With Icons</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail22">Email address</label>
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="exampleInputEmail22" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword42">Password</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="exampleInputPassword42" placeholder="Password">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Horizontal Form</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword12" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="inputPassword12" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn blue">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Horizontal Form With Icons</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="inputEmail12" placeholder="Email">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<div class="input-icon right">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="help-block">
with right aligned icon
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn green">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Column Sizing</h4>
<form role="form">
<div class="row">
<div class="col-md-2">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-3">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder=".col-md-4">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
The look is like this:
My question is how do we know when we should use Element? When we should use Helper? and When should we use View Cells?
And which case should I use for the above? I am leaning towards Helper.
Element
Use it when you need to repeat presentation related stuff, usually HTML, a lot. For example I have a project in which three tables use records of an addresses table. The form part of all of these three that contains the address data is an element.
Helper
Use it to encapsulate view logik, don't put HTML in it if possible or other presentation related things. For example let it do something and depending on the result you can use an element of that result type to render the data: return $this->_view->render('items/' . $type . '_item');
If you look at the core helpers for example the HtmlHelper you'll see a property $_defaultConfig:
protected $_defaultConfig = [
'templates' => [
'meta' => '<meta{{attrs}}/>',
'metalink' => '<link href="{{url}}"{{attrs}}/>',
/*...*/
These are the template strings that are used to generate the HTML output. This separtes the markup pretty nice from the actual code that generates it. Take a look at the FormHelper as well, it's using widgets to render more complex output.
So this works fine with element like pieces of markup. By a rule of thumb I would say if your markup is longer than what you see there make it an element and call it from within the helper or make it a widget.
View Cells
Think of view cells as "Mini MVC" stacks that have a view and can load multiple models. They're IMHO similar to AngularJS directives if you're familiar with them. See this article for an example. I really suggest you to read it, it explains them and their use cases in detail.
I haven't done much with them yet but they can be used to replace requestAction() calls for example. You won't "pollute" your controller with methods that are not intended to be access by a request.
Taken from the linked article above:
One of the most ill-used features of CakePHP is View::requestAction().
Developers frequently use this all over their applications, causing
convoluted cases where you need to figure out if you are within a web
request or an internal action request, cluttering controllers. You
also need to invoke a new CakePHP request, which can add some unneeded
overhead.
Disclaimer
The above reflects my personal view on these things, there is no ultimate and final rule how you have to use these three things. The goal is always clean and re-useable code and proper separation of concerns. How you archive that is up to you, you've got the tools. :)
I am using angularjs for the front-end of my web app. I currently have a comments view that contains multiple reply and edit forms (due to ng-repeat). How could I rewrite the code below so form validation can be applied appropriately to each of the forms (currently the code is only showing a form for reply comment). I have tried using ng-form, but I was unsuccessful.
<div class="comments">
<div ng-hide="comments.length>0||angular.isUndefined(comments)" ng-cloak>
<p class="center">No comments yet, be the first one!</p>
</div>
<div class="comment clearfix" ng-repeat="comment in comments track by $index"
style="padding-left:{{comment.margin}}px">
<div class="body" style="padding-left:60px">
<span ng-hide="comment.edit_mode">{{comment.comment}}</span>
<div ng-show="comment.edit_mode">
<textarea msd-elastic="" ng-model="comment.comment" class="form-control" rows="1">{{comment.comment}}</textarea>
</div>
</div>
<div class="add-comment reply" ng-show="open_reply" ng-cloak>
<form name="form.replyForm" class="form-inline clearfix" role="form"
ng-submit="Submit(reply.comment,story.id,reply.anonymous,comment.comment_id,$index);open_reply=false;reply.comment=''"
novalidate>
<div id="comment-form">
<img ng-src="{{user.avatar}}" alt="" class="avatar"/>
<span>
<textarea msd-elastic ng-model="reply.comment" class="form-control message" rows="1"
placeholder="Add a comment..." ng-click="show_reply_anonymous_checkbox=true"
focus-on="open_reply" name="comment" required></textarea>
<span style="color:red" ng-show="form.replyForm.comment.$error.required">test</span>
</span>
<button type="submit" ng-disabled="form.replyForm.$invalid"
class="btn btn-primary submit">
Reply
</button>
</div>
</form>
</div>
</div>