We Keep Coding

Set form to dirty state (AngularJS) after change in datetimepicker (bootstrap)

I'm have a Bootstrap 3 DateTimePicker input filed on my webpage and I'm trying to enable 'Edit' button whenever change is made to existing data. The problem is that change of datetime using datatimepicker is not marking my form as 'dirty', so button is greyed out permanently.
<input type="submit" value="{{!myCtrl.thing.id ? 'Add' : 'Update'}}" class="btn btn-primary btn-sm" ng-disabled="myForm.$invalid || myForm.$pristine">
I know how to catch datatime change event using JQuery, but I don't have any idea how to access 'myForm' to change it's state to dirty.
<form ng-submit="myCtrl.submit()" name="myForm" class="form-horizontal">
<label class="col-md-2 control-label" for="date">Date:</label>
<div class="col-md-7">
<div class="input-group date" id='datetimepicker'>
<input class="form-control" name="date" id="datetimepicker1" placeholder="select date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker').datetimepicker({
});
});
$("#datetimepicker").on("dp.change", function(e) {
//CODE TO set myForm to 'dirty' state.
});
</script>
</form>

You can manually set it using the general form [formName].$setDirty(). So for you it would be: myForm.$setDirty().

Why don't you try to set a directive to handle jQuery stuff?
mainModule.directive('datePickerHandler', function () {
return {
restrict: 'A',
link: function (scope, el) {
angular.element(document).ready(function () {
$(el).datetimepicker({}).on('dp.change', function(e) {
scope.myForm.$setDirty();
});
});
}
}
});
Then you can have access to the scope directives like form.

angular Error: safe is undefined

I get the 'safe is undefined' error interacting with html, after it has been inserted dynamically into a page via an AJAX call. E.g. When an option is chosen on a select within this html this error is thrown, and select resets to default value. I'm guessing this has something to do with the dynamically inserted content not being added correctly to the scope, even though i am performing the compile operation
Initializing questionForm on $scope in the controller:
$scope.questionForm = {};
The compile operation being performed in the success block of the AJAX call:
var requestQuestions = response.trim();
var template = angular.element('<ng-form name="questionForm">'+requestQuestions+'</ng-form>');
var linkFn = $compile(template);
var element = linkFn($scope);
$(".form-horizontal").append(element);
The dynamically inserted html(after compile has been run):
<ng-form name="questionForm" class="ng-scope ng-dirty ng-invalid ng-invalid-required">
<div ng-class="{'alert alert-danger': questionForm['question_18'].$invalid && data.attempted}" class="form-group question alert alert-danger">
<label class="col-sm-3">
1. What sort of role is this
</label>
<div class="col-sm-9">
<div class="question_box">
<div class="row">
<div class="col-md-11"><select required="required" ng-model="data.application.questions[18]" data-placement="left" data-toggle="tooltip" class="form-control dropdown-question ng-dirty ng-invalid ng-invalid-required" name="question_18"><option value="" disabled="disabled" selected="selected">Please select an option</option><option class="question-item" data-desc="" value="16">Full Time</option><option class="question-item" data-desc="" value="17">Part Time</option><option class="question-item" data-desc="" value="18">Contract</option></select></div><div class="col-md-1 e-padding-5">
<span id="dropdown-tooltip" title="" data-placement="right" data-toggle="tooltip" class="glyphicon glyphicon glyphicon-info-sign hide">
</span>
</div>
</div>
</div>
</div>
<span ng-show="questionForm['question_18'].$error.required && data.attempted" class="help-block">Required</span>
</div>
<div ng-class="{'alert alert-danger': questionForm['question_19'].$invalid && data.attempted}" class="form-group question">
<label class="col-sm-3">
2. Why is this role required to be filled?
</label>
<div class="col-sm-9">
<div class="question_box"><textarea ng-model="data.application.questions[19]" class="form-control ng-pristine ng-valid" name="question_19"></textarea></div>
</div>
<span ng-show="questionForm['question_19'].$error.required && data.attempted" class="help-block ng-hide">Required</span>
</div>
The strange thing is validation on these form elements actually works, will throw an error if the field is required and not filled in. example validation code:
<div ng-class="{'alert alert-danger': questionForm['question_19'].$invalid && data.attempted}" class="form-group question">
Any help would be appreciated. version of angular is 1.2.16

Modifying the form validation in the ngclass sections to reference the sub form elements correctly e.g. :
ng-class="{'alert alert-danger': questionForm.question_18.$invalid && data.attempted}"
2 Adding a watch in a directive which checked for the presence of a new child node within the div with the directive, if new length of child nodes was greater than previous length, compile html, updating the model
app.directive("requestQuestions",function($compile,$timeout){
return {
//restrict:"E",
// terminal:true,
priority:1000,
link:function(scope,element,attrs){
scope.$watch(function () { return element[0].childNodes.length; },
function(newVal,oldVal) {
if(newVal !== oldVal) {
// if the new value is greater than one , need to remove the existing node
if(newVal > 1)element[0].removeChild(element[0].childNodes[0]);
$compile(element)(scope);
}
});
}
};
});

change css class on click in angularJs

I am trying to change the CSS class of a div element on click. Below is the code I am trying.
'input-large' should be active by default.
'input-large input-active' should become active on click on username and becomes inactive on clicking somewhere else.
<div class="input-large">
<label class="input-label">Username</label>
<input class="input-field" type="text">
</div>
<div class="input-large input-active">
<label class="input-label">Username</label>
<input class="input-field" type="text">
</div>
Please let me know how to change the DIVs on click

please use ng-click and ng-blur
follow the snippet in :
http://jsfiddle.net/atXAC/11/
<div ng-controller="MyCtrl">
<div ng-class="{'active':hasFocus==true,'inactive':hasFocus==false}">Enter your Name here</div>
<input type="text" ng-model="user.name" ng-click="hasFocus=true" ng-customblur="onBlur()" required id="name"/>
</div>
here goes your js
var myApp = angular.module('myApp', []);
myApp.directive('ngCustomblur', ['$parse', function($parse) {
return function(scope, element, attr) {
var fn = $parse(attr['ngCustomblur']);
element.bind('blur', function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
}
}]);
function MyCtrl($scope) {
$scope.onBlur = function(){
$scope.hasFocus = false;
}
}
please adapt it for your form.. its working

another approach can be to append the css class in onClick handler in your controller.

directive inside form is not working while moving to another page using Angular.js

I have one issue here.I have a form in my app and my requirement is while user is navigating to another page without submit this form one confirmation message will display to alert user using angular.js.I am explaining my code below.
<form name="billdata" id="billdata" confirm-on-exit enctype="multipart/form-data" novalidate>
<span class="input-group-addon ndrftextwidth text-right" style="width: 180px;">First Name :</span>
<input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="first_name">
<span class="input-group-addon ndrftextwidth text-right" style="width: 180px;">Last Name :</span>
<input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="last_name">
<div style="text-align: center; padding-top: 10px;">
<input type="button" class="btn btn-success" ng-click="addUserData(billdata);" id="addProfileData" value="submit" />
</div>
</form>
And i have the following code in my controller page.
dashboard.directive('confirmOnExit', function() {
return {
link: function($scope, elem, attrs) {
window.onbeforeunload = function(){
if ($scope.billdata.$dirty) {
return "The form is not saved, do you want to stay on the page?";
}
}
$scope.$on('$locationChangeStart', function(event, next, current) {
if ($scope.billdata.$dirty) {
console.log('next',next,current);
if(!confirm("The form is not saved, do you want to stay on the page?")) {
event.preventDefault();
}else{
console.log('hii');
}
}
});
}
};
});
Here i am getting the confirmation message while user is totally leaving the page site.But my requirement is while user is navigating to another page without submit this form the confirmation message should display.Please help me.

Ok so I created a small project with two routes. to demonstrate how to do what you wanted... this is with your pieces of code so just take from it what you need
the directive has been changed to:
.directive('confirmOnExit', function() {
return {
require:'form',
link: function($scope, elem, attrs,formController) {
window.onbeforeunload = function(){
if (formController.$dirty) {
return "The form is not saved, do you want to stay on the page?";
}
}
$scope.$on('$locationChangeStart', function (event, next, current) {
if (formController.$dirty) {
if (!confirm("The form is dirty, do you want to stay on the page?")) {
event.preventDefault();
}
}
});
}
};
});
not that I added the require form to make it generic to all forms you want to use.
this will only consider $dirty so if you want also $invalid add the condition and $submitted as well
**HERE IS A ** PLUNKER with the working example...

Wait to perform function until new data is reflected within the browser

I have Answer objects with an Id property which is also used for the Id tag within the HTML markup inside an ng-repeat.
<div ng-repeat="answer in question.Answers">
<div class="input-group">
<div class="input-group-addon">
<input type="number" style="width:40px" ng-model="answer.AnswerOrder"/>
</div>
<input type="text" class="form-control" id="answer-{{answer.Id}}"placeholder="Question Text" ng-model="answer.AnswerText"/>
</div>
</div>
<div class="input-group">
<div class="input-group-addon"><input type="number" style="width:40px" ng-model="answer.AnswerOrder" disabled/></div>
<input type="text" class="form-control" placeholder="Click to add answer" ng-click="addAnswerToQuestion(question)"/>
</div>
When the user clicks the input "Click to add answer" it runs the method addAnswerToQuestion(question) which is the following within my controller:
var newQuestionCounter = 0;
$scope.addAnswerToQuestion = function (question) {
newQuestionCounter++;
question.Answers.push({
Id: ('n'+newQuestionCounter),
AnswerText: '',
IsCorrect: false,
AnswerOrder: 0,
QuestionId: question.Id
});
document.getElementById('answer-n' + newQuestionCounter).focus();
}
The idea is to give the illusion that you are still on the same element but in reality the "Click to add answer" element is not being modified and your focus is just silently switching to the new Answer.
The issue is that the document.getElementById is getting called before the data-binding and the ng-repeat is updated. So the document.getElementById is not finding the element.
How do I wait for all the 2-way data binding to complete or is there a better way to accomplish what I am trying to do?

Personally, I would rethink the UX before I would do anything like this, but you can accomplish this with the $timeout service. A rule of thumb is that $timeout will always come after a complete $digest() cycle.
$timeout(function() {
document.getElementById('answer-n' + newQuestionCounter).focus();
}, 1);
http://plnkr.co/edit/0LnMBv6DqUjFrcmqd0v3