Html form inside popover - angularjs

I am trying to create a custom popover with a html form in angularjs. The idea is that, when the user press the button with the popover, it shows 5 radio buttons inside. Each radio button has a message that is printed under the button when the radio button is checked.
Here is the directive code:
var customPopoverApp=angular.module('customPopOverApp',[]);
customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
return {
restrict:'A',
transclude:true,
template:"<span>Click on me to show the popover</span>",
link:function(scope,element,attr){
var contentHtml = $templateCache.get("customPopover.html");
contentHtml=$compile(contentHtml)(scope);
$(element).popover({
trigger:'click',
html:true,
content:contentHtml,
placement:attr.popoverPlace
});
}
};
}]);
Here is the main html template:
Popover test
<div class="navbar navbar-default menu-nav" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>
<button custom-popover="" popover-place="bottom">click on me to show the popover</button>
</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="customPopover.html">
<h2>Organizacion de la tabla</h2>
<div class="radio">
<label>
<input type='radio' ng-checked="option1" ng-click='showMessage("Option 1 checked")'/> Option 1<br/>
</label>
</div>
<div class="radio">
<label>
<input type='radio' ng-checked="option2" ng-click='showMessage("Option 2 checked")'/> Option 2<br/>
</label>
</div>
<div class="radio">
<label>
<input type='radio' ng-checked="option3" ng-click='showMessage("Option 3 checked")'/> Option 3<br/>
</label>
</div>
<div class="radio">
<label>
<input type='radio' ng-checked="option4" ng-click='showMessage("Option 4 checked")'/> Option 4<br/>
</label>
</div>
<div class="radio">
<label>
<input type='radio' ng-checked="option5" ng-click='showMessage("Option 5 checked")'/> Option 5<br/>
</label>
</div>
</script>
<div ui-view></div>
and here is the plunker with the full example:
http://plnkr.co/edit/ccb5MR?p=preview
The popover works fine... the first time. If I close the popover and I open again, It is as if it had never been compiled
Does any of you know why the popover does not work the second time?

Related

md-datepicker is not working on bootstrap modal, while works on simple page in angularjs

I am using md-datepicker from angular material. It is working fine except on bootstrap modal. I have applied various solutions like z-index:1200 but none of them proves useful for me.
Following libraries I am using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" />
It shows the area when I use inspect element:
Here is the Modal Code:
<!-- Bootstrap Modal for Add an Event -->
<div class="modal fade" id="AddEvent" role="dialog">
<div class="modal-dialog">
<form ng-submit="addNewEvent()">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> <span class="team-member-icon"><img class="" ng-src="home/img/event-star.svg"></span> Add Event</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="add-member-modl">
<div class="form-group">
<label>Event Name</label>
<input ng-model="newEvent.name" type="text" ng-focus="focusInput = true" class="form-control" placeholder="Mehndi" ng-required="true">
<input type="hidden" ng-model="newEvent.event_id">
<ul class="advance_search_inner" ng-show="focusInput">
<li ng-repeat="event in events| filter:newEvent.name" ng-click="newEvent.name = event.name; focusInput = false; newEvent.event_id = event._id">
{{event.name}}
</li>
</ul>
</div>
<div class="form-group">
<label>Date</label>
<md-datepicker md-open-on-focus ng-model="newEvent.start_date"></md-datepicker>
</div>
<div class="form-group">
<label>Duration</label>
<select class="form-control" ng-model="newEvent.duration">
<option value="1 Day">1 Day</option>
<option value="2 Days">2 Days</option>
<option value="3 Days">3 Days</option>
</select>
<!--<input type="text" class="form-control" ng-model="newEvent.duration" placeholder="1 Day(s)" ng-required="true">-->
</div>
</div>
</div>
<div class="modal-footer mod-footr">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
</div>
Probably the z-index of the modal is higher than the date picker selector. Try to change the datepicker z-index with the following css:
.md-datepicker-calendar-pane {
z-index: 2000;
}

validating controls inside different div in AngularJs

I am using AngularJs. I have 2 div, which I am hiding and showing each other. Each div contains few controls, which I have set "required" validation on click of submit button. By default the div "createMenu" is shown. Below is the code used:
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container" ng-show="createMenu">
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" required="" ng- model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
<div class="container" ng-show="copyView">
<div class="row">
<div class="col-sm-4">
<label class="control-label">New Name :</label>
</div>
<div class="col-sm-4">
<input type="text" required="" maxlength="150" class="form-control" ng-model="NewName" name="NewName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.NewName.$error.required">New Name is required</span>
<input type="submit" value="Submit" ng-click="copydata()" />
</div>
The issue is: If I click on the submit button in the first div, the controls in the div "copyView" is also getting validated. When the first submit button is clicked, I want to validate the textbox available in the "createMenu" div only. when the "copyView" div is shown, than at that time, when the submit button inside that div is clicked, the "New Name" textbox should be validated.
How to differentiate between the two divs, when the error messages are shown.
Thanks
You can use separate form tag for the separate div tag.
like
<div ng-controller="name">
<form>
//first dive
</form>
<form>
//second div
</form>
</div>

Angular validation for only 1 input field inside a form

I'm building a form using Angular 1.1.1 and Ionic.
There are many "wallets" and the user needs to send a new "value" to each of the wallet. My form has a validation for all fields which works fine when the 'submit' button for the form is pressed.
However, I also have a button next to each wallet to send only value to this wallet (not different values to all wallets). When I press it, all the validation errors appear, but I need error to be visible only for the particular wallet.
My form (index.html):
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{wallet.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="myForm.$submitted==true && myForm.wallet_{{wallet.id}}.$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>
My controller (values.js):
'Use Strict';
angular.module('App')
.controller('valuesCtrl', function($scope, $localStorage, UserService, $state) {
$scope.sendValues = function(wallets){
if ($scope.myForm.$valid) {
...
} else {
$scope.myForm.submitted = true;
}
},
$scope.sendValue = function(wallet){
if (wallet.value == null) {
$scope.myForm.submitted = true;
} else {
...
}
}
})
You need to create a form for each wallet
This is due to your html name attributes has same value inside ng-repeat
Use $index in your name field for differentiate all the name attribute.
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{$index}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{wallet.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="myForm.$submitted==true && myForm.wallet_{{$index}}.$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>
You have to create a form inside form again. But as per HTML standard you can not have nested form. But angular provided that ability to have nested form but the inner form should be ng-form. Which mean you are going to wrap form & inside that you can find multiple ng-form's.
So you should have ng-form="innerForm" which will keep track of each repeated form.
Other thing which I observed is, you did mistake while using ng-show(you had {{}} inside ng-show expression, which would not work). To fix it you could access object via its key like ng-show="innerForm['wallet_'+wallet.id].$error.required"
Markup
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div ng-form="innerForm" class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="innerForm['wallet_'+wallet.id].$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="innerForm.$submitted==true && innerForm['wallet_'+wallet.id].$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>

Angular-ui validation not working in model window

I am working on AngularJS with ui-grid. In the grid when i edit a row I am opening a modal window like this
$scope.editRow = function(row){
var modalInstance = $modal.open({
templateUrl : contextPath+ '/row/edit',
controller : 'EditController',
size : 'lg',
scope: $scope,
resolve : {
result : function() {
return row;
}
}
});
modalInstance.result.then(function() {
.......
});
}
and the model window gets open with the row details after calling Editcontroller default function. Until this point it is working fine.
Now i am trying to do the validation on the opened modal window using AngularUI and the validation is not working. Below is my UI page where the validation is not working
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<h3 align="center">Edit Row Details</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" name="myform" ng-submit="submitForm(myform.$valid)" novalidate>
<!-- Content Start -->
<div class="container">
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
<label for="name" class="control-label"> Name
</label>
<div>
<input type="text" name="myform.name" class="form-control input-sm"
ng-model="myform.name" placeholder="Name"
required />
<p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div>
<button type="submit" ng-model="myform.save" ng-disabled="myform.$invalid"
class="btn btn-primary" ng-click="edit(myform)">EDIT</button>
</div>
</div>
</div>
</div>
<!-- Content End -->
</form>
</div>
Somebody please help me how to do the validation. one more thing if i open the modal window normally the validation is working but i have the issue when i edit the row. I think this is a scope issue and the child scope is not getting bind. Your help is very much appreciable.
You don't need to include the form name in the name of the input, it's within a form so the input is bound to that form already. I'd also recommend binding your ng-model to another object on your scope (below I've used model) rather then the form itself.
You would write it like this.
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
<label for="name" class="control-label"> Name </label>
<div>
<input type="text" name="name" class="form-control input-sm"
ng-model="model.name" placeholder="Name"
required />
<p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>
</div>
</div>
</div>
Also I'd change the ng-submit to the following
<form class="form-horizontal" name="myform" ng-submit="myform.$valid && submitForm()" novalidate>
Finally, I am able to find the solution
in EditController add below code
$scope.form={};
and your form should have form.myform like this
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<h3 align="center">Edit Row Details</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" name="form.myform"
ng-submit="submitForm(form.myform.$valid)" novalidate>
<!-- Content Start -->
<div class="container">
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : form.myform.name.$invalid && !form.myform.name.$pristine }">
<label for="name" class="control-label"> Name </label>
<div>
<input type="text" name="myform.name"
class="form-control input-sm" ng-model="myform.name"
placeholder="Name" required />
<p ng-show="form.myform.name.$invalid && !form.myform.name.$pristine"
class="help-block">Name is required.</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div>
<button type="submit" ng-model="myform.save" ng-disabled="form.myform.$invalid" class="btn btn-primary"
ng-click="edit(myform)">EDIT</button>
</div>
</div>
</div>
</div>
<!-- Content End -->
</form>
</div>
I am posting this becoz it may be helpful someone..

Radio button is not clickable in ng-repeat

I am trying to iterate the radio buttons using ng-repeat. All the radio buttons are visible perfectly with first radio button checked, but when I try to select the other radio buttons, radio buttons are not clickable. can anybody please help me out what I am missing here..!!
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4" name="optionsRadiosA" value="option4" checked="">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
corrected html
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{n}}" name="optionsRadiosA" value="{{n}}" checked="">
<label class="form-label" for="rb4_{{n}}">{{n}}</label>
</div>
</div>
</div>
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{$index}}" name="optionsRadiosA" ng-model="radioVal[$index]">
<label class="form-label" for="rb4_{{$index}}">{{n}}</label>
</div>
</div>
</div>
I have added ng-model="radioVal_{{$index}}" in each of input iteration, why because it's ng-model who will contain current ng-value of your radio buttons. Try it, and get back to me.
and Id's are dynamically generated now.
Working Now!!!!!!
You need to fix the following issues:
The model must exist in parent scope. To do this, use ngInit to initialize an ngModel outside of your ngRepeat: ng-init="selected = { number:0 }"
All radio button controls must bind to the same ngModel. Add an ngModel to your input control, and bind it to the ngModel that you declared in parent scope: ng-model="selected.number"
Display different values for each radio button: value="{{n}}"
NOTE: Remember, ngRepeat creates a child scope for each iteration.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="selected = { number:0 }">
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" ng-model="selected.number" type="radio" value="{{n}}">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
{{ selected }}
</div>
You should have different ng-model for each radio element, you could do it by using ng-model="radio[$index]"
Markup
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4-{{$index}}" name="optionsRadiosA" ng-value="option4" ng-model="radioVal">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>

Resources